HTML Style Guide and Coding Conventions

A consistent style makes it easier for others to understand your HTML code.

Always Declare the Document Type

Always declare the document type as the first line in your document:

<!DOCTYPE html>

HTML allows sticking mixed case for element names.

However, we recommend using lowercase element names, because:

In HTML, you do not have to close all elements (for example the <p> element).

However, we strongly recommend closing all HTML elements, like this:

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

HTML allows mixed case for attribute names.

However, we recommend using lowercase attribute names.

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

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

When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.

Try to split long code lines.