Since 1990 when the HTML4 spec was released as a recommendation the web has constantly evolved pushing the boundaries of internet technologies further and further. HTML4 was getting obsolete and couldn’t satisfy the needs of developers that needed more from the web’s markup language.

HTML5 tries to satisfy those needs and let us develop more interactivity into web sites with features like new APIs, form controls, new structural and semantic tags and also multimedia elements.

The new HTML structure/semantic elements

Lots of developers use class and id attributes of HTML to create more semantic markup, but HTML5 introduces a new set of semantic elements that help developers produce richer markup. What used to be a <div> soup in HTML4 is going to be replaced by the new structural tags.

Let’s review the most important HTML5 tags that you can use starting TODAY:

Section

1
<section>

A section is a grouping of content from the same category, is preceded by a header and followed by a footer but not necessarily. The main difference from the div element is that the section element builds a hierarchy of the document by nesting one element inside another. In HTML5 you can only use one heading element , the h1(for compatibility with HTML4.1) element and the browser calculates the heading level from the page’s sections. This is the section element’s description by the W3C:

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

Header and footer

1
<header>
2
<footer>

The header element is used, to markup heading sections. An HTML5 document can contain multiple headings, such as the main heading of the page(the masthead as some developers call it), headings that introduce different sections and even articles can contain headers. Headers element can contain for example for an article the title of the article(heading) the date and maybe the author.

The footer element is similar to the header but it contains footer informations (meta information, copywright data). A document can contain multiple footers.

Nav

1
<nav>

The nav element defines a navigational section that contains typically a list of links. There can be more than one nav elements in a webpage but not all links should be included in this element but only those that “that consist of primary navigation blocks”.

There’s a a bit of ambiguity on the subject but it appears that is has been resolved.

Article

1
<article>

The WHAT working group describes this tag as : “a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.”

An article can be nested inside an article, in this case the nested article becomes related to the enclosing article.

Articles can also be separated into sections.

Aside

1
<aside>

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography … The element can also be used for typographical effects like pull quotes.”

(WHATWG spec)

it seems like this element can be used to mark any type of content typically in a sidebar, for example a tagcloud or any other content that is ” tangentially related to the content around the aside element” so things aren’t very clear here.

To sum things up let’s build a sample HTML5 document using these tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
  <head>
    <title>Blog title</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

Some observations arise:

  • html5 has a new and shorter doctype: <!DOCTYPE html>
  • by default any element has a styling of “display:inline” and this is what happens with the elements listed above in incompatible brwosers, so we have to apply the following css to them:
    header, footer, nav, section, article, aside {
    display:block;
    }

Compatibility:

You can use these tags right now with some minor “adjustments”. One adjustment is what i mentioned before that of adding a style of “display:block” to the elements because browsers that don’t support HTML5 will apply a default “display:inline” style.

Getting to the bad seed of browsers namely IE, we’ve seen that it will render the unknown tags but it will not apply any style to them; luckily Javascript will save us and if we create the elements dynamically the styles are magically aplied 🙂

There are known problems with older versions of Firefox(2) , the rendering engine closes an unknown element when it sees the start tag of a block-level element like p, h1, or div, but we must not worry about that because the majority of Firefox users upgrade often.

Here’s a list of most of the new HTML5 elements:

  • <article> For external content, like text from a news-article, blog, forum, or any other content from an external source
  • <aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content
  • <details> For describing details about a document, or parts of a document
  • <summary> A caption, or summary, inside the details element
  • <figure> For grouping a section of stand-alone content, could be a video
  • <figcaption> The caption of the figure section
  • <footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
  • <header> For an introduction of a document or section, could include navigation
  • <mark> For text that should be highlighted
  • <meter> For a measurement, used only if the maximum and minimum values are known
  • <nav> For a section of navigation
  • <progress> The state of a work in progress
  • <ruby> For ruby annotation (Chinese notes or characters)
  • <rt> For explanation of the ruby annotation
  • <rp> What to show browsers that do not support the ruby element
  • <section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document
  • <time> For defining a time or a date

Tagged with: