This reuse and recycle series is going to be my attempt to reuse some of the material I’ve got laying around. I originally created this stuff for other projects. Since those projects won’t see the light of day, you guys get a bunch of cool content without too much (new) effort on my part.
Cool. On with the show.
New semantic elements
Since they’re of interest to the broadest audience- anyone who makes websites has to use markup- the new semantic elements, like header, footer, section, and aside have likely had the greatest adoption of any of the new HTML5 features. The design of many of these was based on common usage patterns identified during a web census. For an obvious example the common pattern of id="header" and id="footer" patterns found across the web turned into standalone header and footer elements.
Others elements like aside, time and figure, were logical additions and enhancements to the existing roster of HTML elements.
The code sample below illustrates a sample HTML5 document. It starts with the simplified HTML5 doctype. While this isn’t strictly a semantic element it’s still worth pointing out. This was designed to be the simplest doctype possible that would trigger browsers to render the page in what’s referred to as standards mode. Indicating that a page is in standards mode instructs the browser to render it based on the various specifications that rule the web. This is a legacy of the broken CSS implementations seen in browsers like Internet Explorer and Netscape Navigator 4.0. When browser vendors recognized that rendering as close to standards as possible was a good thing, they had to do something to allow the pages that were rendered according to those broken implementations to still function. For those pages, they invented quirks mode- a mode which embraces the funky, broken things that browsers used to support. The rest of us have lived in standards mode ever since.
Following that, you’ll also see slightly simplified versions of the html and meta charset elements. The more interesting elements are found in the body. There, you’ll see four new elements: header, footer, article and time. The first three replace very common div ids and classes, describing typical page elements representing a site header, site footer and a typical content article. time defines a human readable element that can be styled and scripted with CSS and then an associated datetime attribute which allows for defined, programmatic access to the underlying time data.
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Sample HTML5 Document</title>
<meta name="description"
content="This is a sample of an HTML5 Document, containing sever new semantic elements">
</head>
<body>
<header>
<h1>HTML5 is where it's at.</h1>
</header>
<article>
<header>
<h1>We Love Semantic Elements</h1>
</header>
<p>This post illustrates several of the new HTML5 semantic elements.</p>
<p>They're cool</p>
<footer>
<p>Posted at <time datetime="2012-08-29">the end of August, 2012</time>
by <a href="https://htmlcssjs.wpengine.com/" rel="me">Rob Larsen</a></p>
</footer>
</article>
<footer>
<p>© <a href="https://htmlcssjs.wpengine.com/" rel="me">Rob Larsen</a></p>
</footer>
</body>
</html>
Use of the new semantic elements is becoming quite common. While they don’t do anything special with these new elements, most browsers "support" them right now. The only exception is in older versions of Windows® Internet Explorer® which simply ignore unknown elements. By default, you can’t style them or script them. Thankfully libraries like Modernizr and the HTML5Shiv snippet smooth the way for cross-browser use of the new elements in older versions of IE by using a tiny piece of code that celverly introduces those elements to the browser so that IE will learn to take notice of them.
For those of you into that sort of thing, Paul Irish offers an interesting history of this vital piece of programming in his blog post "The Story of the HTML5 Shiv"