HTML Coding Conventions
Web developers are often not certain regarding the coding style and syntax that is used in HTML.
Between 2000 and 2010, many web developers have converted from HTML to XHTML.
With XHTML, developers were put under pressure to write valid and "well-formed" code.
HTML5 is a little more sloppy if you consider code validation.
Using HTML5, you can create your own Best Practice, Style Guide and Coding Conventions.
Be Smart and Future Proof
A use of style in a consequent way will make it easier for others to understand and use your HTML.
In the future, many programs like XML readers, may be wanting to read your HTML.
Using a well-formed "close to XHTML" syntax, can be smart.
Make sure that you keep your style smart, tidy, clean, 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 recommend you to use lowercase element names:
Close All HTML Elements
In HTML5, you need not close all the elements (for example the
We recommend you to close all HTML elements:
Close Empty HTML Elements
In HTML5, it is optional(not mandatory) to close empty elements.
This can allowed:
This can also be allowed:
The slash (/) is needed in XHTML and XML.
If you are expecting an XML software for accessing your page, it can be a good idea to get it.
Use Lower Case Attribute Names
HTML5 is allowing mixing up of uppercase and lowercase letters in attribute names.
We will recommend you to use lowercase attribute names:
Quote Attribute Values
HTML5 will allow attribute values without quotes.
We will recommend quoting of attribute values:
This will not be working properly, as the value is containing spaces:
Always make use of the alt attribute with images. It becomes important if the image is not viewed.
Always defining image size is recommended. It will reduce flickering because the browser can reserve space for images before they are loaded.
Spaces and Equal Signs
Spaces present around equal signs is allowed and legal:
But space-less becomes more easier to read, and groups entities are better together:
Avoid Long Code Lines
While using an HTML editor, it is not convenient to scroll right and left for reading the HTML code.
Trying to avoid code lines exceeding 80 characters is recommended.
Blank Lines and Indentation
Add blank lines without a reason is a bad practice.
For maintaining readability, adding blank lines are suggested to separate large or logical code blocks.
For better readability, adding 2 spaces of indentation is usefel. Do not use TAB.
Unnecessary blank lines and indentation should not be added. It is not needed to use blank lines between short and related items. It is not needed to indent each and every element:
Omitting <html> and <body>?
While writing with the HTML5 standard, the <html> tag and the <body> tag can be ignored or omitted.
The following code will be validated as HTML5:
We will not recommend omission of the <html> and <body> tags.
The <html> element is known as the document root. Inorder to specify the page language, this one is the recommended place:
Declaration of a language is important for increased accessibility for the applications (screen readers) and search engines.
Omitting <html> or <body> can lead to crashing of DOM and XML software.
Omitting <body> can lead to errors in older browsers (IE9).
While using the HTML5 standard, the <head> tag can also be ignored oromitted.
Using default settings, browsers will be adding all the elements before <body>, to a default <head> element.
The complexity of HTML can be reduced by omitting the <head> tag:
Omitting tags is quite unfamiliar for the web developers. It will require more time to established the guideline.
The <title> element is needed in HTML5. Making the title as meaningful as possible is a good practice:
For ensuring better interpretation, and correct search engine indexing, both the language and the character encoding needs to be defined as soon as possible in a document:
Short comments can be written in one line, with a space after :
Long comments, which will be written in many lines, must be written with on separate lines:
Long comments are easier to observe, if they are indented 2 spaces.
You can use simple syntax to link style sheets (the type attribute is not necessary):
Short rules are written compressed, on one line, similar to this:
Long rules must be written in multiple lines:
Addition of a space after a comma, or a semicolon, is considered to be a general rule in all types of writing.
Usage of simple syntax for loading external scripts (the type attribute is not necessary):
Use Lower Case File Names
Most of the web servers (Apache, Unix) are case sensitive regarding file names:
london.jpg cannot be taken as London.jpg.
few web servers (Microsoft, IIS) are not case sensitive:
london.jpg can be taken as London.jpg or london.jpg.
If you are using a mix of upper and lower case, you have to be extremely consistent.
If you are moving from a case insensitive, to a case sensitive server, even a small errors will create problems in your web.
For avoiding these problems, it is preferrable to use lower case file names (if possible).
HTML files must be having a .html extension (or .htm).
CSS files must have a .css extension.
Differences Between .htm and .html
There is no difference present between the .htm and .html extensions. Both will be treated the same as HTML by any web browser or web server.
The differences lies in cultural ways:
.htm "smells" or works according to early DOS systems where the system extension was limited to 3 characters.
.html "smells" or works according to Unix operating systems which does not have this limitation.
When a URL is not specified with a filename (like http://hexagonitsolutions.com/ngo/), the server will return a default filename. Some of the common default filenames are index.html, index.htm, default.html, and default.htm.
In case your server is configured only by using "index.html" as default filename, your file's name must be "index.html", not "index.htm."
But, servers can also be configured using more than one default filename, and normally you can have any number of default filenames as needed.
It can be kept in mind that the full extension for HTML files is .html, and there is no reason for not using it.