HTML5 Style Guide and Coding Conventions:
Be Smart and Future Proof:
Use Correct Document Type:
Declaring the document type as the first line in your document should be always ensured.
If you need consistency in using lower case tags, you can use:
Use Lower Case Element Names:
HTML5 will allow you to mix uppercase and lowercase letters in element names.
We suggest you use lowercase element names because:
This is incorrect:
This is correct:
This is correct:
Close Empty HTML Elements:
In HTML5, it is optional to close empty elements, but, in XHTML and XML it is required to close the empty tags with closing slash(/).
Use Lower Case Attribute Names:
HTML5 allows the mixing of uppercase and lowercase attributes in element names.
We suggest you to always use lowercase attributes names because:
Quote Attribute Values:
HTML5 allows attribute values without quotes.
We suggest quoting attribute values because:
Incorrect: This will not work, because value attribute contains space.
Incorrect: This may work but in some cases it may provide some unexpected errors.
Don’t forget to add the alt attribute to images. The alt attribute is important when the cannot be displayed due to some reason.
Furthermore, always define height and width to the image, it reduces glimmering because the browser can reserve space for the image before loading.
Spaces and Equal Signs:
HTML5 permits spaces around equal signs, however, less-space is easier to read, and groups entities better together.
Avoid Long Code Lines:
When working on an HTML editor, it is inappropriate to scroll right and left to read the HTML code, so it is better to write code lines up to 80 characters.
Blank Lines and Indentation:
Don’t add blank lines without any reason.
You can add blank lines to separate large or logical code blocks, for readability.
For readability, add two or four spaces of indentation and don’t use the tab key.
Don’t use unnecessary blank lines and indentation. It is not necessary to indent every element.
Don't Neglect <html> and <body> Tag:
The <html> tag and the <body> tag can be ommited in HTML5.
Though, we do not recommend omitting the <html> and the <body> tag. The <html> element is the document root and It is the recommended place for specifying the page language.
Don't neglect <head> Tag:
The <head> tag can be omitted in HTML5.
Browsers will by default add all elements before <body> tag to a default <head> element. The complexity of HTML can be reduced by omitting the <head> tag.
Though we don’t suggest omitting the <head> tag because omitting the <head> tag can produce the unexpected results.
The <title> element is required in HTML5 as it makes the title as meaningful as possible.
For the right interpretation and correct search engine indexing of the webpage, both the language and the character encoding should be defined as early as possible in a document.
Setting The Viewport:
A method is introduced in HTML5 to let the web designers take control over the viewport through the <meta> tag. The viewport is nothing but the user’s visible area of a web page. The viewport varies with the device and will be smaller on a mobile phone than on a screen of the computer.
You must include the followingviewport element in all your web pages:
Short comments in HTML should be written on one line, like this:
Comments that spans more than one line in HTML should be written like this:
Always use the simple syntax for linking to style sheets (the type attribute is not necessary):
You can write short rules like this:
You can write long rules like this:
The opening bracket should be placed on the same line as the selector.
Always use one space before the opening bracket and two spaces of indentation. Use semicolon after each property-value pair.
Quotes can be used around the values only if the value contains spaces.
Always place the closing bracket on the new line without leading spaces.
Avoid code lines longer than 80 characters.
Always use the simple syntax for loading external scripts and the type attribute is not necessary.
Use Lower Case File Names:
The web servers like Apache, Unix are the case sensitive about the file names as “Sample.jpg” cannot be accessed as “sample.jpg”.
The web servers like Microsoft, IIS are not case sensitive as “Sample.jpg” can be accessed as “sample.jpg”.
If you want to use both uppercase and lowercase you have to be very consistent.
If you move from a case insensitive to a case sensitive server then small errors will break your web, so to avoid these problems always use lowercase file names.
HTML files can have a .html or .htm extension.
CSS files should have a .css extension.
Differences Between .htm and .html:
The .htm and .html both refer to file extensions of HTML files. The .htm is used only as an alternate extension to .html. Because in some operating systems, like the Disk Operating System and Windows 3.X, they do not allow the use of four-letter extensions. Therefore, instead of using .html the .htm extension is used.
In actual, .htm extension was usually used back in the old days, like when DOS was popular. Now a days, computers can easily support big files and wide length of file names, therefore, having a four-letter extension is not a problem anymore.