HTML5 Style Guide:




HTML Coding Conventions

The HTML documents are often not designed and styled well. It is a good practice to organize your website so that it may become easy for the user to understand the content written. Your website should look interactive. This is all about how much you are creative.




The XHTML has strict rules to be followed when coded and hence it becomes difficult for the developers to use it but it has a well formed syntax, on the other hand, HTML5 is flexible and there are no hard and fast rules to be followed.

Following are some coding tips to make a well formed code:


DOCTYPE Declaration

 In an HTML document, the DOCTYPE declaration should be in the first line of the document. Consider the following example:

<!DOCTYPE html>


Element Names

The name of the elements in an HTML document should be lowercase. The HTML5 allows the mixing of lowercase and uppercase letters but it is not a good practice because uppercase letters are difficult to write and the code does not look clean and tidy however, lowercase letters are easy to write. This is illustrated below:

The elements should be like this:

<header> instead of <HEADER>.

It should be noted that this is also not good to write the start tag in lower case and the end tag in uppercase letters as below:

<header>

<p> Daily Newspaper </p>

<HEADER>

The best is to write both the start and the eng tag in lowercase as follows:

<header>

<h1> Daily Newspaper </h1>

</header>


All elements should be closed

 In the HTML document, all the elements used should be closed. There are some elements for which the end tag or the closing tag is not mandatory for example the paragraph element <p>. It is not mandatory to close it because when a new paragraph element is used, the previous tag is automatically closed.

But it is recommended to close all the HTML tags and elements. Consider the following example:

<header>

<h1> Daily Newspaper </h1>

</header>


Empty elements

In the HTML document it is not mandatory to close the empty elements. There is a slash (/) which should be there in the empty tags when they are completed. This is required in the XHTML or XML. To understand this, consider the following example of line break element:

<br> or <br / >

Both are correct. The input element is also empty and should be ended as follows:

<input = “submit” value = “submit” / >


Attribute Names

In the HTML document, the name of the attributes should be written in the lowercase letters. The HTML5 allows the mixing of lowercase and uppercase letters but it is not a good practice because uppercase letters are difficult to write and the code does not look clean and tidy however, lowercase letters are easy to write. This is illustrated below:

The attributes should be like this:

< input type = “text” value = “Abraham” >

Instead of:

< input type = “text” VALUE= “Abraham” >


Quote attribute values

In an HTML5 document the elements can be written within single quotes, double quotes or even not using the quotes. This is not a good practice as it makes difficult for the user to identify the values of the attributes. The attribute values that are in quotes are easy to understand. To understand this, consider the following example:

 EXAMPLE

We should write as follows in an HTML5 document:

< input type = “text” value = “Abraham” >

Instead of:

< input type = text value = Abraham >


Image Attributes

There are some instructions to be followed when using the img element. When you are adding an image into your HTML document, you should use the “alt” attribute, it acts as an alternative if the image is not displayed. You should also specify the height and the width of the image that you are using, from this the browser will know in advance that how much space is to be preserved for this image.

It is better to use the img tag as follows:

<img src = “URL” alt = “The alternative text for image” style = “width: 200px ; height: 200px” >

Instead of

<img src = “URL” >


Spaces and Equal signs

In the HTML document it is not mandatory or there are no hard and fast rules to generate spaces around the equal sign when assigning the values to attributes. But it is better not to generate spaces because it will help the user to understand the attributes well when they are grouped together.

This is illustrated below. Consider the following example:

Use:

< input type=”text” value=”Abraham” >

Instead of

< input type = “text” value = “Abraham” >


Long Code lines

In an HTML document or when you are writing the HTML document, you should avoid writing in one line more than 80 characters. Because it will become difficult for the user to scroll left and right.


Indentation and Blank line

In the HTML document, do not left the lines blank, as it will not improve the readability of the code. Rather leave a line when a paragraph is ended or when similar type of elements are ended. To understand this consider the following example:

Write the code as

<body>

<p>Blockquote is used to indent the text</p>

<blockquote>

Three things cannot be long hidden: The sun, the moon, and the truth.

</blockquote>

</body>

</html>

Instead of

<body >

<p>

  Blockquote is used to indent the text

</p>

< blockquote>

            Three things cannot be long hidden:

            The sun, the moon, and the truth.

</blockquote>

</body>

</html>




Table example

Consider the following example to know how to write table elements:

EXAMPLE

<html>

<body>

<h1> Table </h1>

<table>

<tr>

<th rowspan=2> Favorite score </th>

<th colspan=2> Score </th>

</tr>

<td> baseball </td> <td align=right> 9 </td>

</tr>

<tr>

<td> baseball </td> <td align=right> 6 </td>

</tr> <tr>

<td> tennis </td> <td align=right> 8 </td>

</tr>

</table>

</body>

</html>

Instead of

<html>

<body>

<h1> Table </h1>

<table>

<tr>

<th rowspan=2> Favorite score </th>

<th colspan=2> Score </th>

</tr>

<td> baseball </td> <td align=right> 9 </td>

</tr>

<tr>

<td> baseball </td> <td align=right> 6 </td>

</tr> <tr>

<td>

tennis

 </td>

<td align=right> 8 </td>

</tr>

</table>

</body>

</html>


List example

Consider the following example:

<ul>

<li> Entertainment News </li>

<li> Sports News </li>

<li> Weather News </li>

 </ul>

Instead of

< ul >

< li >

 Entertainment News

< / li>

< li >

 Sports News < / li >

< li > Weather News < / li>

< / ul>


<html> and <body> elements

In an HTML document, the use of the <html> tag and the <body> tag is not necessary, they can be eliminated. Therefore it will result in the following code:

<!DOCTYPE html>

<head>

<title> … </title>

</head>

<h1> … </h1>

<p> … </p>

But it is not recommended to eliminate the main part of the HTML document. Eliminating <html> and <body> tags will crash the XML and will make difficult for search engines to recognize the document. In the internet explorer 9, if we omit the <body> tag errors can be occurred.


The <head> element

In an HTML5 document, the <head> element can also be eliminated. All the elements before the <body> tag will be added by default. But it is not a good practice to eliminate the HTML elements. If the <head> tag is eliminated the HTML document will look like:

<!DOCTYPE html>

<html>

<title> … </title>

<body>

<h1> … </h1>

<p> … </p>

</body>

</html>


Meta Data

The URL or character encoding is very important along with the declaration of the language that you will be using. It is much easier for the browser and search engines to recognize the HTML document if the URL or character encoding and the language declaration is done as earlier as possible. Consider the following example:

<!DOCTYPE html>

<html lang = “en-US”>

 <head>

<meta charset = “UTF-8”>

<title> … </title>

</head>


HTML Comments

HTML document comments are denoted by the special character strings <!- – and – ->. The first string is the start of the HTML comment and the second string is used to indicate the end of the comment. Anything that is written between these two strings is considered to be a comment.

The comments are not displayed by the browser even if they are written in the body of the HTML document. The string that is used to start the comment should not have spaces between its characters but this is not the mandatory condition for the ending comment.

Following is the example of comment:

<!- -This is a comment – ->

If this statement is written in the HTML document it will not be displayed by the

browser.

EXAMPLE

Two or more comments can be used as follows:

<!- – This is a comment – –

– – this is the second comment that is declared with the first comment – ->


Style Sheets

While writing your HTML document, you should be very simple and accurate. You should also use simple syntax. In an HTML document, when you are defining < style > tag define it in one line if the definition is short. To illustrate this consider the following example:

EXAMPLE

body { font-family: Helvetica; font-size: 0.9em; }

If the definition is long

EXAMPLE

header, footer {

padding: 15px;

color: maroon;

background-color: red;

}


Rules

It the definition is long, do it in multiple lines with the opening bracket in the same line with one space as did in the example and a closing bracket in a new line with no space. After each value use semicolon for example:

padding: 15px; etc.

You should only use the quotation marks if the value has spaces.


Loading JavaScript in HTML

To load the JavaScript, there is a simple syntax as follows:

<script src = “index.js” >

In the above example, there is no need to use the type attribute. “.js” is the extension for JavaScript and src is the source attribute.


Accessing HTML Elements with JavaScript

There are many ways to access the elements with JavaScript for example getting elements by ID, getting elements by name. Consider the following example:

EXAMPLE

If we use different HTML styles the JavaScript can cause different errors that are difficult to find. For example:

< ! DOCTYPE html >

< html >

< body >

<p id=”INDEX” > This is paragraph 1. </p >

<p id=”index” > This is paragraph 2. </p >

<script >

document.getElementById(“index”).innerHTML = “Paragraph 2 will be overwritten”;

</ script >

</ body>

</html >

This will produce the following result:

accessing-html-elements-with-javascript


Use Lower Case File Names

When you are designing your website or writing the HTML code you should always use the lower case letters because some browsers understand lower case letters and some browsers do not differentiate between them.

In other words we can say that some of the browsers are case sensitive and some browsers are case insensitive. If you wrote the file name in upper case then the case sensitive browser will break the website and will occur errors. To avoid this we should always use the lower case letters in the file names.


File Extensions

The file extension of the HTML file is .html or we can also use .htm extension. The extension for the CSS files is .css and the extension for the JavaScript files is .js.


Differences between .htm and .html

There is no difference between the .html and .htm file. Both of these files are HTML documents and will be treated as HTML by any server.

The early DOS systems used the .htm and the Unix operating systems use .html.

The MS software uses the .htm file.




Technical Differences

There are technical differences when you configure your server with the file name .html and you are not using it rather sing the .htm file. If you configured your HTML file name with .html, you must use the .html file and not the .htm file.

There are some browsers that may be configured with more than one default file name and you can use as many as you want. The default file names for the HTML are listed below:

  1. html
  2. htm
  3. html
  4. htm