In this chapter we will briefly go through HTML5 elements rules only.

HTML5 allows mixing uppercase and lowercase letters in element names, however it is recommended to stick with the lowercase tag names to keep up with the convention and to make the whole document aesthetically appealing and easy readable.

There are a few reasons why:

  • Mixing uppercase and lowercase names looks bad
  • Developers are used to use lowercase names (as in XHTML) due previous practices
  • Lowercase look cleaner and more professional
  • Lowercase are easier to write, read and troubleshoot

Not a good way:

<HEADER>

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

</HEADER>

Even worse way:

<Header>

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

</HEADER>

Suggested way:

<header>

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

</header>

Tags closing

In HTML5, you don't have to close all elements (for example the <p> element). However it is again recommended to keep up with the conventional way and close tags properly.

Bad:

<header>

  <p>This is a paragraph.

  <p>This is a paragraph.

</header>

Good:

<header>

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

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

</header>

Same with the empty tags closing; in HTML5, it is optional to close empty elements but is also recommended.

This is allowed:

<meta charset="utf-8">

This is also allowed:

<meta charset="utf-8" />

The slash (/) is required in XHTML and XML but not in the HTML, however if you are expecting to mix later on a XML parsing script with your HTML5 document and you don't use the slash, the XML won't be able to understand it.

How about omitting <html>, <head> or <body> element?

In the HTML5 standard, the <html> tag, the <body> tag and the <head> tag may be omitted (???). Although it is unsure why is that allowed, it is still much better not omit those two main elements.

The following code will validate as HTML5:

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<h1>This is a heading</h1>

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

In the HTML5 standard, the <html> tag, the <body> tag and the <head> tag may be omitted (???). Although it is unsure why is that allowed, it is still much better not omit those two main elements.

The following code will validate as HTML5:

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<h1>This is a heading</h1>

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

Or:

<!DOCTYPE html>

<html>

<title>Page Title</title>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

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

The <html> element is the document root. It is the recommended place for specifying the page language:

<!DOCTYPE html>

<html lang="en-US">

Here are a few big reasons why not to omit these tags (besides readability and convention):

  • declaring a language in <html> tag is important for accessibility applications (screen readers) and search engines.
  • omitting main tags such as <html> or <body> will crash most of DOM and XML software based applications.
  • omitting <body> may also result in errors with older browsers (IE9).

However omitting the <head> tag may reduce the cluster at the header of a document and thus that can be consider a valid reason to leave it out. However the benefits do not overpass the negative possibilities so we would still suggest using the <head> tag as well.

Meta Data and <title> element

The <title> element is required in HTML5 and it carries a great meaning to search engines, so use it wisely.

To ensure proper interpretation, and correct search engine indexing, both the language and the character encoding should be defined as early as possible in a document:

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="UTF-8">

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

</head>

 

›› go to examples ››