In this chapter we are going to go through some suggestions how to keep up with the proper structure while writing a HTML5 document.

HTML Comments

In general writing comments is still the same. However there are some suggestions to follow:

Short comments should be written on one line, with a space after <!-- and a space before -->:

<!-- This is a comment -->

Long comments, spanning many lines, should be written with <!-- and --> on separate lines:

<!--

  This is a long comment example. This is a long comment example. This is a long comment example.

  This is a long comment example. This is a long comment example. This is a long comment example.

-->

Long comments are easier to observe, if they are indented 2 spaces.

Blank Lines and Indentation

Unnecessary:

<ol>

  <li>Pears</li>

  <li>Apples</li>

  <li>Oranges</li>

</ol>

Proper:

<ol>

2sp<li>Pears</li>

  <li>Apples</li>

  <li>Oranges</li>

</ol>

Style sheets

Use simple syntax for linking style sheets with omitting the type attribute if wanted:

<link rel="stylesheet" href="styles.css">

Short rules may be compressed, like this:

p.para {font-family:"Calibri"; font-size:1.2em;}

While longer rules may be spaced out like this:

body  {

  background-color: #eee;

  font-family: "Verdana", serif;

  font-size: 1.2em;

  color: #222;

}

JavaScript

Use simple syntax for loading external scripts with omitting the type attribute if wanted:

script src="newscript.js">

Remember to keep element names in lowercase, or otherwise there will be issues with JavaScript and DOM, for instance:

var elm = getElementById("Para");

var elm = getElementById("para");

Those scripts above will produce different results.

Using lower case file names

Some web servers are case sensitive and will produce errors if you load an image coolpix.png, instead of Coolpix.png. Therefore it is wise to stick to lowercase names while naming your HTML files.

File extensions rules

HTML files in general should have an .html extension. Older documents may still use .htm, but it is better to avoid it.

CSS files should have a .css extension and JavaScript files should have a .js extension.

 

›› go to examples ››