In the first few chapters of this book, we’ll talk about how we can use HTML5’s and CSS’s features to improve the interfaces we present to our users. We’ll see how we can create better forms, easily style tables, and improve the accessibility of our pages for assistive devices. We’ll also see how we can use content generation to improve the usability of our print style sheets, and we’ll explore in-place editing with the new contenteditable attribute. First, though, let’s take a look at how HTML5’s new elements can help us structure our pages better.
I’d like to talk to you about a serious problem affecting many web developers today. Divitis—a chronic syndrome that causes web developers to wrap elements with extra div tags with IDs such as banner, sidebar, article, and footer—is rampant. It’s also highly contagious. Developers pass Divitis to each other extremely quickly, and since divs are invisible to the naked eye, even mild cases of Divitis may go unnoticed for years.
Here’s a common symptom of Divitis:
<div id=”navbar_wrapper”>
<div id=”navbar”>
<ul>
<1 i ><a h ref = “/”>Home</ax/l i >
<1 i ><a h ref = “/”>Home</ax/l i >
</ul>
</div>
</div>
Here we have an unordered list, which is already a block element,1 wrapped with two div tags that are also block elements. The id attributes on these wrapper elements tell us what they do, but you can remove at least one of these wrappers to get the same result. Overuse of markup
leads to bloat and pages that are difficult to style and maintain.
There is hope, though. The HTML5 specification provides a cure in the form of new semantic tags that describe the content they contain. Because so many developers have made sidebars, headers, footers, and sections in their designs, the HTML5 specification introduces new tags specifically designed to divide a page into logical regions. Let’s put those new elements to work. Together with HTML5, we can help wipe out Divitis in our lifetime.
In addition to these new structural tags, we’ll also talk about the meter element and discuss how we can use the new custom attributes feature in HTML5 so we can embed data into our elements instead of hijacking classes or existing attributes. In a nutshell, we’re going to find out how to use the right tag for the right job.
In this chapter, we’ll explore these new elements and features:
<header>
Defines a header region of a page or section. [C5, F3.6, IE8, S4,
010]
<footer>
Defines a footer region of a page or section. [C5, F3.6, IE8, S4, Ol 0]
<nav>
Defines a navigation region of a page or section. [C5, F3.6, IE8, S4,
010]
<section>
Defines a logical region of a page or a grouping of content. [C5,
F3.6, IE8, S4, 010]<article>
Defines an article or complete piece of content. [C5, F3.6, IE8, S4,
010]
<aside>
Defines secondaiy or related content. [C5, F3.6, IE8, S4, 010]
Custom data attributes
Allows addition of custom attributes to any elements using the
data- pattern. [All browsers support reading these via JavaScript’s
getAttributeO method.]
<meter>
Describes an amount within a range. [C5, F3.5, S4, 010]
<progress>
Control that shows real-time progress toward a goal. [Unsupported
at publication time.]