Element Changes in HTML5

Mitch Fincher
January 12, 2012

Use the arrow keys to move back and forward through the slides.

(Using css and JavaScript from "http://code.google.com/p/html5slides/" to make slides.)

Back to the HTML5 series.


New Structural Tags

A page may have multiple instances of all these elements and they can be nested inside each other.

Common Structural Composition for a Page

<article> 1
<section> A
<section> B
<article> 2
<section> A
<section> B

Reasons To Use The New Tags


picture of poem

From www.fincher.org/quotes/Poems.shtml.

      <h1 id="Boadicea">Boadicea: An Ode</h1>
      Then the progeny that springs <br>
      <span class="indent2">From the forests of our land, </span><br>
      Armed with thunder, clad with wings, <br>
      <span class="indent2">Shall a wider world command. </span><br>
      Regions Ceasar never knew <br>
      <span class="indent2">Thy posterity shall sway, </span><br>
      Where his eagles never flew, <br>
      <span class="indent2">None invincible as they.</span><br>
      by William Cowper (1731-1800)
      Inscribed on a  statue of Queen Boadicea sculpted by Thomas Thornycroft between 1856 and 1885  near the Westminster B   ridge, on the north bank of the River Thames in London.

Yes, yes..., but what about IE?

One of the problems with these new tags is styling them with css in older IE browsers. To style these in IE we need to do two things. First, tell IE that the default is not "inline", but "block" in our css.

header, nav, footer, article, aside {display: block;}
footer {clear:both;}

Secondly we need to tell IE versions before 9 that these are real, stylable elements. It's just a fortunate quirk of the older IEs, but if we just create the tags, then IE is happy to style them. We could do this,


But fortunately Remy Sharp has written the HTML5 shim which does this and other magic for us and Google is hosting it, so we just have to include this:

<!-- use html5 new elements in old explorer browsers-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

New Elements - <figure> and <figcaption>

<img src="http://www.fincher.org/images/2011-10-06-Kitten.jpg" width="150" />
<figcaption>Generic Cat Picture</figcaption>
Generic Cat Picture

New Elements - <progress> and <meter>


Used to show ... uhm ... progress. Not to be used for static numbers. <progress> does not have a min value.

<progress id=myProgress max=100 value=30></progress>


Meter is used for showing static proportions, like how full the disk is, or federal budget deficit verses GDP. It is not widely implemented.

<meter min=0 max=100 value=70></meter>

Time Element

From the w3 spec: "The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute."

<time> comes with two attributes, "datetime" and a boolean "pubdate".


... <time>December 21st, 2012</time> ...

... <time datetime="2012-12-21">December 21st, 2012</time> ...

This article was published on
    <time datetime="2012-02-22T00:06:00" pubdate>January 22nd, 2012</time>

"Children of a Lesser God" Elements

Removed Elements

HTML5 removes some tags which are now obsolete, these include

<basefont> <font> <s> <tt> <u> <big> <blink> <center> <embed> <font> <marquee>

Also <frame>s are gone so these tags are now deprecated:

<frame> <frameset> <noframes>

Although <iframe> is still with us.

Some removed items have better implementations:

<acronym> is replaced by <abbr>
<applet> is replaced by <object>
<dir> is replaced by <ul>

Removed Attributes

These attributes are now deprecated. Browsers will still support them for some time, but be aware they are going away and should be replaced, typically with CSS.

Redefined Elements

Some tags were not removed, but have had their meanings redefined like

<address> <b> <cite> <em> <hr> <i> <small> <strong>

For example, <small> used to mean "render the enclosed text in a smaller font", now it means the enclosed text should have the meaning of being in small print, like copyright and EULA. The actual downsizing should be done in CSS. Search engines can now "down vote" content in <small>.

Anchor tags

Anchor tags with names are obsolete

To guide the gentle reader to a specific location in a document we a '#' at the end of the URL:


This form of putting in tags is now obsolete, which is a good thing since it overloaded the "anchor" tag with another confusing job:

<a name="Potato" />
</li><li>The Humble Potato

Add an id to the nearest container instead

</li><li id=Potato>The Humble Potato

Void Elements

"void elements" are those elements without content and the closing short-hand tag "/>" is not needed, like

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

The w3's documentation in section 8.1.2 Elements defines void elements to be

area, base, br, col, command, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

In the old xhtml days, we always closed our tags, "<br />", but now we can just do "<br>" with a clear conscience, since HTML5 is not XML.


Start using the new structural tags, it's the future.


< Overview Canvas Forms | Elements | Local Storage   |  >