HTML(5) Code Conventions

HTML Code Conventions

Many web developers know very little about HTML code conventions.

From 2000 to 2010, many web developers switched from HTML to XHTML.

Developers using XHTML gradually developed better HTML coding conventions.

For HTML5, we should form good code conventions. Below are several suggested conventions.

Use the correct document type

The document type declaration is located on the first line of the HTML document:

<!DOCTYPE html>

If you want to use lowercase like other tags, you can use the following code:

<!doctype html>

Use lowercase element names

HTML5 element names can use uppercase and lowercase letters.

Lowercase letters are recommended:

  • Mixing uppercase and lowercase styles is very bad.
  • Developers usually use lowercase (similar to XHTML).
  • Lowercase style looks cleaner.
  • Lowercase letters are easy to write.

Not recommended:

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

Very bad:

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

Recommended:

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

Close all HTML elements

In HTML5, you don't have to close all elements (e.g. <p> elements), but we recommend adding a closing tag to every element.

Not recommended:

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

Recommended:

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

Close empty HTML elements

In HTML5, empty HTML elements don't have to be closed either:

We can write it like this:

<meta charset="utf-8">

Or like this:

<meta charset="utf-8" />

The slash (/) is required in XHTML and XML.

If you expect XML software to use your page, using this style is very good.

Use lowercase attribute names

HTML5 attribute names allow uppercase and lowercase letters.

We recommend using lowercase attribute names:

  • Mixing uppercase and lowercase at the same time is a very bad habit.
  • Developers usually use lowercase (similar to XHTML).
  • Lowercase style looks cleaner.
  • Lowercase letters are easy to write.

Not recommended:

<div CLASS="menu">

Recommended:

<div class="menu">

Attribute values

HTML5 attribute values don't have to use quotes.

We recommend using quotes for attribute values:

  • If an attribute value contains spaces, quotes are needed.
  • Mixed styles are not recommended; you are advised to be consistent.
  • Using quotes for attribute values is easier to read.

In the following example, the attribute value contains spaces and uses no quotes, so it won't work:

<table class=table striped>

The following uses double quotes, which is correct:

<table class="table striped">

Image attributes

Images usually use thealtattribute. When the image cannot be displayed, it can be displayed instead of the image.

<img src="html5.gif" alt="HTML5">

Defining image dimensions can reserve the specified space during loading and reduce flickering.

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

Spaces and equal signs

Spaces can be used before and after the equal sign.

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

But we recommend using fewer spaces:

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

Avoid long code lines

With HTML editors, scrolling left and right through code is inconvenient.

Try to keep each line of code under 80 characters.

Blank lines and indentation

Don't add blank lines for no reason.

Add blank lines for each logical block of functionality, making it easier to read.

For indentation, use two spaces; using TAB is not recommended.

Don't use unnecessary blank lines and indentation between relatively short code.

Unnecessary blank lines and indentation:

<body>

  <h1>Example</h1>

  <h2>HTML</h2>

  <p>
Example, what you learn is not only technology, but also dreams.
Example, what you learn is not only technology, but also dreams.
Example, what you learn is not only technology, but also dreams,
Example, what you learn is not only technology, but also dreams.
  </p>

</body>

Recommended:

<body>

<h1>Example</h1>

<h2></h2>
<p>Example, what you learn is not only technology, but also dreams.
Example, what you learn is not only technology, but also dreams.
Example, what you learn is not only technology, but also dreams.
Example, what you learn is not only technology, but also dreams.</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>

Omit <html> and <body>?

In standard HTML5, the <html> and <body> tags can be omitted.

The following HTML5 document is correct:

Example:

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

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

Try it yourself »

Omitting the <html> and <body> tags is not recommended.

The <html> element is the root element of the document, used to describe the page's language:

<!DOCTYPE html>
<html lang="zh">

Declaring the language is convenient for screen readers and search engines.

Omitting <html> or <body> will crash in DOM and XML software.

Omitting <body> will cause errors in old browsers (IE9).

Omit <head>?

In standard HTML5, the <head> tag can be omitted.

By default, browsers will add the content before <body> to a default <head> element.

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 »
Note Omitting the head tag is still not recommended at this time.

Metadata

In HTML5, the <title> element is required; the title name describes the page's theme:

<title>Example Tutorial</title>

The title and language can let search engines quickly understand your page's theme:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Example Tutorial</title>
</head>

HTML comments

Comments can be written in<!--and-->:

<!-- This is a comment -->

Longer comments can be written in<!--and-->with line breaks:

<!--
This is a longer comment. This is a longer comment. This is a longer comment.
This is a longer comment. This is a longer comment. This is a longer comment.
-->

Indent the first character of a long comment by two spaces for easier reading.

Style sheets

Use a concise syntax for style sheets (the type attribute is not required):

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

Short rules can be written on one line:

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

Long rules can be written on multiple lines:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Put the left curly brace on the same line as the selector.
  • Add a space between the left curly brace and the selector.
  • Use two spaces for indentation.
  • Add a space between the colon and the property value.
  • Use a space after commas and symbols.
  • Use a semicolon at the end of each property and value.
  • Only use quotes when attribute values contain spaces.
  • Put the closing brace on a new line.
  • Each line should be no more than 80 characters.
Note Adding a space after commas and colons is a common rule.

Loading JavaScript in HTML

Use concise syntax to load external script files (the type attribute is not necessary):

<script src="myscript.js">

Using JavaScript to access HTML elements

Poor HTML formatting can cause JavaScript execution errors.

The following two JavaScript statements output different results:

Example

var obj = getElementById("Demo")

var obj = getElementById("demo")

Try it Yourself »

Try to use consistent naming conventions for JavaScript in HTML.

Refer to JavaScript Code Conventions。

Use lowercase file names

Most web servers (Apache, Unix) are case-sensitive: london.jpg cannot be accessed as London.jpg.

Other web servers (Microsoft, IIS) are not case-sensitive: london.jpg can be accessed as London.jpg or london.jpg.

You must keep a consistent style. We recommend always using lowercase file names.

File extensions

HTML file extensions can be.html(or.htm)。

CSS file extension is.css 。

JavaScript file extension is.js 。

Difference between .htm and .html

.htm and .html extension files are essentially the same. Browsers and web servers treat them as HTML files.

The difference is:

.htm was used in early DOS systems, where file extensions were limited to three characters.

In Unix systems, there is no particular limit on extensions, so .html is commonly used.

Technical difference

If a URL does not specify a file name (e.g., http://www.example.com/css/), the server returns a default file name. Common default file names are index.html, index.htm, default.html, and default.htm.

If the server is configured with only "index.html" as the default file, you must name the file "index.html", not "index.htm".

However, servers usually allow multiple default files, and you can configure the default file names as needed.

In any case, the full extension for HTML is ".html".

Other extensions