html5 – the initial elements

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:

<!--DOCTYPE html>

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, lang and 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:

<html lang="en">

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 <head> element.
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.
The <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

<div id="header">

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

<header>

<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:

<footer>

Here is the complete HTML page for the example:

<!--DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>1. Supply and demand</title>
</head>
<body>
  <header>
    <h1>1. Supply and demand</h1>

bla bla short explanation about supply and demand
  </header>
  <table>

etc. etc.

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.

The table with the supply and demand values
Rent euro/month Demand Supply
400 80 40
800 40 80

The curves:


The curves

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s