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:
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:
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:
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 >
This is paragraph 1.
This is paragraph 2.
document.getElementById(“index”).innerHTML = “Paragraph 2 will be overwritten”;
script >
body>