HTML5 Style Guide

<< Previous

Next Chapter >>

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:

<!DOCTYPE html>

If you need consistency in using lower case tags, you can use:

<!doctype html>

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:

Mixing up of uppercase and lowercase names is not a good practice
Developers have made a practice to use lowercase names (as in XHTML)
Lowercase will look neater and cleaner
Lowercase are more easier to write

Bad:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Very Bad:

<Section>
<p>This is a paragraph.</p>
</SECTION>

Good:

<section>
<p>This is a paragraph.</p>
</section>

Close All HTML Elements

In HTML5, you need not close all the elements (for example the

element).

We recommend you to close all HTML elements:

Looking bad:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Looking good:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

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:

Mixing up of uppercase and lowercase names is not a good practice
Developers have made a practice to use lowercase names (as in XHTML)
Lowercase will look neater and cleaner
Lowercase are more easier to write

Looking bad:

Looking good:

Quote Attribute Values

HTML5 will allow attribute values without quotes.

We will recommend quoting of attribute values:

Mixing uppercase and lowercase values is not a good practice
Quoted values are much easier to read and identify
You MUST be using quotes if the value contains spaces

Very bad:

This will not be working properly, as the value is containing spaces:

Bad:

Good:

Image Attributes

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:

Unnecessary:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

<p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
</p>

</body>

Better:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Table Example:

<table>
<tr>
    <th>Name</th>
    <th>Description</th>
</tr>
<tr>
    <td>A</td>
    <td>Description of A</td>
</tr>
<tr>
    <td>B</td>
    <td>Description of B</td>
</tr>
</table>

List Example:

<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

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:

Example

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Try it Yourself

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:

<!DOCTYPE html>
<html lang="en-US">

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

Omitting <head>?

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:

Example

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it Yourself

Omitting tags is quite unfamiliar for the web developers. It will require more time to established the guideline.

Meta Data

The <title> element is needed in HTML5. Making the title as meaningful as possible is a good practice:

<title>HTML5 Syntax and Coding Style</title>

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:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>

HTML Comments

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.

Style Sheets

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:

p.into {font-family: Verdana; font-size: 16em;}

Long rules must be written in multiple lines:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

Placing of the opening bracket on the same line as the selector.
Using one space before the opening bracket.
Using 2 spaces of indentation.
Using colon plus one space between each property and its value.
Using space after each comma or semicolon.
Using semicolon after each property-value pair, including the last.
Only using quotes around values if the value contains spaces.
Placing the closing bracket on a new line, without leading spaces.
Avoiding lines above 80 characters.

Addition of a space after a comma, or a semicolon, is considered to be a general rule in all types of writing.

Loading JavaScript in HTML

Usage of simple syntax for loading external scripts (the type attribute is not necessary):

Accessing HTML Elements with JavaScript

The consequences of writing "untidy" HTML styles, may result in JavaScript errors.

The 2 JavaScript statements given below will produce different results:

Example

var obj = getElementById("Demo")

var obj = getElementById("demo")

Try it Yourself

Using of same naming convention (as JavaScript) is preferred in HTML.

Visit the JavaScript Style Guide.

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

File Extensions

HTML files must be having a .html extension (or .htm).

CSS files must have a .css extension.

JavaScript files must have a .js 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.

Technical Differences

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.

<< Previous

Next Chapter >>