HTML coding conventions


HTML Coding Conventions

Web developers are often uncertain about the coding technique and syntax to use in HTML as the HTML version changed from HTML to XHTML and finally HTML5. Although, HTML5 is far more flexible but sloppy in terms of code validation, the code itself is easier to understand. Since it supports bad coding, it is always a smart move to write HTML codes close to XHTML so that you do not need to rewrite the entire code in case new browsers or the newer versions of the existing ones stopped supporting bad coding standards.

Here are a few HTML coding conventions you might want to follow to maintain proper coding stardard.

  1. Always keep your code clean and well-formed with proper indentation.
  2. Always declare the document type as the first line in your document.
  3. Use lowercase for element names
  4. Close all HTML elements even the empty tags like <hr />, <br />, <img />
  5. Use lowercase for attribute names
  6. Always enclose attribute values with quotes. (" ")
  7. Always add alt attribute to images.
  8. Avoid long code lines
  9. Do not add blank lines without a reason.
  10. Make the <title> elemet as meaningful as possible
  11. Always define the language and the character encoding <meta> in the document
  12. Use lowercase for filenames

HTML and XHTML

XHTML stands for EXtensible HyperText Markup Language. It is almost identical to HTML but is stricter in coding standard. XHTML is supported by all major browsers. It is a markup language where documents must be marked up correctly. It was developed by combining the strengths of HTML and XML.

Bad HTML Coding Example

<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

XHTML Document Structure

  1. XHTML DOCTYPE is mandatory
  2. The xmlns attribute in <html> is mandatory
  3. <html>, <head>, <title> and <body> are mandatory
  4. XHTML elements must be properly nested
  5. XHTML elements must always be closed
  6. XHTML elements must be in lowercase
  7. XHTML documents must have one root element
  8. Attribute names must be in lower case
  9. Attribute values must be quoted
  10. Attributes must have a value

In HTML, some elements can be improperly nested whereas in XHTML all elements must be properly nested.

// HTML  
<b><i>This text is bold and italic</b></i>
// XHTML
<b><i>This text is bold and italic</i></b>

XHTML elements must always be closed while most browsers display them properly in HTML.

// HTML  
<p>This is a paragraph
<p>This is another paragraph
// XHTML
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty elements must be closed in XHTML.

HTML
<br> <hr> <img>  
// XHTML  
<br /> <hr /> <img />

XHTML elements must be in lowercase

// HTML  
<BODY>
<P>This is a paragraph</P>
</BODY>
//XHTML
<body>
<p>This is a paragraph</p>
</body>

XHTML attribute names must be in lowercase

// HTML  
<table WIDTH="100%">
// XHTML
<table width="100%">

XHTML attribute values must be quoted

// HTML  
<table width=100%>
// XHTML
<table width="100%">

XHTML attribute minimization is forbidden

// HTML  
<input type="checkbox" name="vehicle" value="car" checked />
// XHTML
<input type="checkbox" name="vehicle" value="car" checked="checked" />

XHTML Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title of document</title>
</head>

<body>
  some content 
</body>

</html>