HTML5 Style Guide

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:

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:

instead of
.

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:

Daily Newspaper

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

Daily Newspaper

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

. 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:

Daily Newspaper

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:


or

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

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:

“The

Instead of

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

Blockquote is used to indent the text

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

Instead of

Blockquote is used to indent the text

< blockquote>

Three things cannot be long hidden:

The sun, the moon, and the truth.

Table example

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

EXAMPLE

Table

Favorite score Score
baseball 9
baseball 6
tennis 8

Instead of

Table

Favorite score Score
baseball 9
baseball 6

tennis

8

List example

Consider the following example:

  • Entertainment News
  • Sports News
  • Weather News

Instead of

< ul >

< li >

Entertainment News

< / li>

< li >

Sports News < / li >

< li > Weather News < / li>

< / ul>

and elements

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

But it is not recommended to eliminate the main part of the HTML document. Eliminating and 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 tag errors can be occurred.

The element

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

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:

HTML Comments

HTML document comments are denoted by the special character strings . 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:

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 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: