The HTML5 language, although continuation from HTML4 and thus XHTML1, it is not as strict as the latter one, but rather flexible like HTML4. However there are some rules and suggestions to it and we will briefly go through them in this chapter, as well as emphasize the difference's HTML5 and XHTML.

NOTE: Before engaging with further text, keep in mind that although HTML rules are much looser then XHTML, it is still suggested to stick to most of them. There are a couple of reasons for that:

  1. First conventional way is good because it standardizes the scripting and makes it easy readable, understandable (better for troubleshooting) and also aesthetically appealing.
  2. Besides that if later we are going to mix our HTML document with one that is or support XML, we are due for a problem; that is because a XML document has to be well formed and thus will not understand unclosed tags and some other things.

Following text will show us the main differences between those two languages and suggested practice for coders.

Declare document type

The doctype still has to be declared, but unlike in previous HTML versions, it is enough to specify that in deed it is a HTML document, like this:

<!DOCTYPE html>

You can even use lowercase letters, but that would be unconventional so it is better to leave this tag in uppercase format.

Using lowercase verse uppercase letters

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.

Using lowercase attributes names

HTML5 allows mixing uppercase and lowercase letters in attribute names as well. Once again that is not suggested behavior.

Looking bad:

<p CLASS="nav">

Looking good:

<p class="nav">

Quoting of attribute values

HTML5 allows attribute values without quotes. It is recommended to quote attribute values for these reasons:

  • You have to use quotes anyway if the value contains spaces
  • Mixing styles is never good
  • Quoted values are easier to read
  • Unquoted values won't be read by an XML document

Bad example:

<p class=highlight>

Good example:

<p class="highlight">

Spaces and Equal Signs

Spaces around equal signs are legal, but no suggested because it will be difficult to read.

Not suggested:

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

Suggested:

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

Style Sheets and JavaScript

The type attribute in HTML5 is not necessary for loading external style sheets and scripts. And here we agree with this new rule.

This is good:

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

<script src="myscript.js">

 

›› go to examples ››