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.
used to begin a section, usually containing an h1 tag and perhaps navigation.
Contains navigation links and assorted associated items.
This element contains items typically found at the bottom of a web page - copyright, legal notices, authorship. A page can have multiple "footer" elements. "footer" elements can appear anywhere on a page, sometimes at the top.
An "article" is a self-contained composition that can be removed from the page and will make sense in a stand-alone fashion.
A "section" is not self-contained and would not make sense by itself. <section>s are typically found inside of <article>s. A <section> can have its own "h1" tags.
A component, typically shown as a note on the side of an article, not critical to understanding the content.
A page may have multiple instances of all these elements and they can be nested inside each other.
Instead of <div id="bottom">, which doesn't give any clue about what is in the <div> tag, <footer> now gives search engines some hints.
In HTML4 we had <h1> to <h6>. With the new HTML5 stuctural tags we can go to <h11> by nesting <h1> tags inside <section>'s, nested inside <section>'s, inside <article>'s.
If a page was aggreagated of sections of HTML4 content with embedded <h2> and <h3>'s, then embedding content with a <h1> would be awkward. With all the heading safely inside <section>, or <article>, the browser can outline the aggregated content and apply the correct styling.
<article>
<header>
<h1 id="Boadicea">Boadicea: An Ode</h1>
</header>
<section>
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>
</section>
<section>
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>
</section>
<footer>
by William Cowper (1731-1800)
</footer>
<aside>
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.
</aside>
</article>
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,
<script>document.createElement('header');...</script>
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> <![endif]-->
<figure> <img src="http://www.fincher.org/images/2011-10-06-Kitten.jpg" width="150" /> <figcaption>Generic Cat Picture</figcaption> </figure>
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>
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".
Examples:
... <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>
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>
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.
we will have to replace usage like this:
<a href="http://FirstAndLastLetters.com" target="_blank">
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 with names are obsolete
To guide the gentle reader to a specific location in a document we a '#' at the end of the URL:
http://www.fincher.org/History/RandomThoughts.shtml#Potato
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" 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.
