HTML5 Style Guide and Coding Conventions

 

HTML Coding Conventions

Web developers are often uncertain about the coding style and syntax to use in HTML.

Between 2000 and 2010, many web developers converted from HTML to XHTML.

With XHTML, developers were forced to write valid and “well-formed” code.

HTML5 is a bit more sloppy when it comes to code validation.

Be Smart and Future Proof

A consistent use of style makes it easier for others to understand your HTML.

In the future, programs like XML readers may want to read your HTML.

Using a well-formed-“close to XHTML” syntax can be smart.

Always keep your code tidy, clean and well-formed.

Use Correct Document Type

Always declare the document type as the first line in your document:



If you want consistency with lower case tags, you can use:




Use Lower Case Element Names


HTML5 allows mixing uppercase and lowercase letters in element names.


We recommend using lowercase element names because:


    

  • Mixing uppercase and lowercase names is bad
    • 

  • Developers normally use lowercase names (as in XHTML)
    • 

  • Lowercase look cleaner
    • 

  • Lowercase are easier to write
    • 





Bad:




 
  
This is a paragraph.




Very Bad:


 
  
This is a paragraph.




Good:


 
  
This is a paragraph.




Close All HTML Elements


In HTML5, you don’t have to close all elements (for example the <p> element).


We recommend closing all HTML elements.




Bad:





  
This is a paragraph.
  
This is a paragraph.



Good:



  
This is a paragraph.

  
This is a paragraph.




Close Empty HTML Elements


In HTML5, it is optional to close empty elements.




Allowed: