9 Common Mistakes People Make On HTML

Even the best coders make mistakes sometimes. When it comes to the markup language HTML, there are some mistakes that are more common than others. You should try and avoid these.

  1. Block elements within inline elements:

    In HTML, block elements create the structure of a document, while Inline elements are placed within the blocks. A very common mistake is people placing block elements within inline elements

    Right way way:

    <h2><a href="#">Inline</a></h2>
    

    Wrong way way:

    <a href="#"><h2>Block</h2></a>
    
  2. ALT attribute for image tags:

    The ALT attribute describes the context of an image. So, it needs to go with an IMG tag. Having this attribute will help users know whether an image is important before it has been loaded. Also, the web crawler will index content better. For images that are just for show, you can use an empty ALT attribute

    Right way:

    <img src="pic.jpeg" alt="User Pic"/>
    

    Wrong way:

    <img src="pic.jpeg"/>
    
  3. Showing a list using line breaks:

    Using line breaks to show items in bulleted order is not a good idea. It is better to use the unordered list <ul> or ordered list <ol> tags

    Right way:

    <ol>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
    </ol>
    

    Wrong way:

    1. X<br/>
    2. Y<br/>
    3. Z<br/>
    
  4. <b> and <i> for bold and italics:

    While both these tags are used for bold and italics respectively, semantically they are presentational tags. The CSS properties font-weight and font-style should be used for the purpose. Hence, make use of <strong> and <em> in place of <b> and <i>

    Wrong way:

    <b>This is Wrong way! </b>
    

    Right way:

    <strong>This is Right way! </strong>
    
  5. Multiple line breaks:

    Use this tag only to insert single line breaks in a paragraph. Many use this to create gaps between elements, which shouldn't be done.

    Right way

    <p>First line</p>
    <p>Second line</p>
    

    Wrong way

    First line<br/><br/>
    Second line.<br/><br/>
    
  6. Avoid Inline Styles:

    Semantic HTML and CSS is used in order to separate the document structure and styling. This is why you shouldn't be placing styling in an HTML document directly.

    Right way:

    HTML

    <h2>Right way</h2>
    

    CSS

    h2 .red {color: red;}
    

    Wrong way:

    <h2 style="color:red;">Wrong way way</h2>
    
  7. Adding and Removing border attribute in HTML:

    This is another presentational, which should be modified in CSS because of semantics.

    Right way:

    HTML

    <img src="mypic.jpg"/>
    

    CSS

    img .no-border{border: 0px;}
    

    Wrong way:

    <img src="mypic.png" border="0"/>
    
  8. Don't use deprecated elements:

    Don't use old HTML tags that have already been declared as deprecated by the W3C Consortium.

  9. Put DOCTYPE:

    Doctype helps determine the kind of HTML that is being used. Including it determines whether your HTML is valid.

Comments

Popular posts from this blog

Reduce TIME_WAIT Socket Connections