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.

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

XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title> and <body> are mandatory
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
Attribute names must be in lower case
Attribute values must be quoted
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"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

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

<body>
  some content 
</body>

</html>

0 Like 0 Dislike 0 Comment Share Tweet

HTML coding conventions

HTML Coding Conventions

HTML and XHTML

Bad HTML Coding Example

XHTML Document Structure

XHTML Example

Leave a comment

More From html

All Categories