HTML5 Style Guide and Coding Conventions:
- Website developers are frequently doubtful about the coding style and syntax that is used in HTML.
- Many web developers have converted from HTML to XHTML in between 2000 and 2010.
- Developers were put under pressure to write valid and "well-formed" code with XHTML.
- HTML5 is a little more sloppy if we consider code validation.
Be Smart and Future Proof:
- The use of style in a consistent way will make it easier for others to understand and use your HTML.
- In the future, many programs like XML readers may want to read your HTML.
- The use of a well-formed "close to XHTML" syntax can be smart.
- Always keep your code clean, tidy and well-formed.
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:
- Mixing up of uppercase and lowercase names is not a good practice
- Developers usually use lowercase names (as in XHTML)
- Lowercase will look neater and cleaner
- Lowercase names are easier to write
This is incorrect:
This is correct:
Close All HTML Elements:
In HTML5 , you don’t have to close all elements, but we suggest you to close all HTML elements.
This is incorrect:
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(/).
Also correct:
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:
- Mixing uppercase and lowercase attributes names are bad.
- Developers usually use lowercase attributes names (like XHTML)
- Lowercase attributes look clean and neat
Bad:
Good:
Quote Attribute Values:
HTML5 allows attribute values without quotes.
We suggest quoting attribute values because:
- Mixing uppercase and lowercase values are bad
- Quoted values are easier to read
- You MUST use quotes if the value contains spaces
Incorrect: This will not work, because value attribute contains space.
Incorrect: This may work but in some cases it may provide some unexpected errors.
Correct:
Image Attributes:
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.
Incorrect:
Correct:
Spaces and Equal Signs:
HTML5 permits spaces around equal signs, however, less-space is easier to read, and groups entities better together.
Incorrect:
Correct:
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.
Incorrect:
Correct:
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.
Meta Data:
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:
HTML Comments:
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:
Style Sheets:
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.
Loading JavaScript in HTML:
Always use the simple syntax for loading external scripts and the type attribute is not necessary.
Accessing HTML Elements with JavaScript:
Following two JavaScript statements will produce different results:
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.
File Extensions:
HTML files can have a .html or .htm extension.
CSS files should have a .css extension.
JavaScript files should have a .js 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.