Let’s start with a simple HTML page which will illustrate the HTML5 changes; I will use an example for the demand & supply curves, just displaying a table and a chart picture.
Every SGML document (from which the HTML format is extended) starts with a DOCTYPE declaration, which associates it with the appropriate Document Type Declaration (DTD).
An XHTML1.0 (the latest HTML standard before HTML5) page has a declaration like this:
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is the HTML5 doctype:
That’s it. Just 15 characters. Already a nice change.
An HTML page is a series of nested elements; which elements are valid and how they are nested is defined by the DOM (Document Object Model): the document is an object, a sort of tree with nodes.
The root element (or node) of an HTML page is always
<html>, which is still valid in HTML5 but some of its attributes are now optional.
One of them is the
xmlns attribute (this is a vestige of XHTML 1.0); it says that elements in this page are in the XHTML namespace but elements in HTML5 are always in this namespace, so you no longer need to declare it explicitly.
Other two attributes,
xml:lang, both define the language used in the HTML page. Only the
lang attribute has any effect in HTML5.
That leaves us with this root element:
The first child of the root element is usually the
<head> element. The
<head> element contains metadata (informationabout the page), rather than the body of the page itself.
The head element itself hasn’t changed in any interesting way in HTML5.
The good stuff is what’s inside the
http-equiv is used to emulate the HTTP header. This specifies that the page should be served with an HTTP header called ‘Content-Type’ that has a value ‘text/html’. This is a typical use of the
meta element, which specifies the document type so a client (browser or user agent) knows what content type to render.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
It got a little easier in HTML5. Now it looks like this:
<meta charset="utf-8" />
There are other new attributes defined for the metadata section, you can see a list in the specifications.
<body> element is the second element in the model and represents the main content of the document. There is only one body element in an HTML document.
Let’s go one level deeper now.
One of the new elements added by HTML5 is the header. Until now you had to define an identifier
to mark up a section of the document as a header; now you have available semantic elements for special sections, as the header: HTML5 defines a
<header> element for this purpose.
This element identifies – quoting from the specifications – a group of introductory or navigational aids, and usually contains the section’s heading (like an h1–h6 element ), but this is not required. The
header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
The HTML5 specification has examples of using the
<header> element. Here is what it would look like
<h1>Officina Mutante</h1> <h2>Latest News</h2> <p>Our new awesome product has just been released!</p> … </header>
Similar to the header element, you can define a footer element too:
Here is the complete HTML page for the example:
<meta charset="utf-8" />
<title>1. Supply and demand</title>
<h1>1. Supply and demand</h1>
bla bla short explanation about supply and demand
And here is how the page is displayed:
1. Supply and demand
The demand and supply analysis is one of the main tool available to see how a market behaves.