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:
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:2
Defines a header region of a page or section. [C5, F3.6, IE8, S4,
O10]
Defines a footer region of a page or section. [C5, F3.6, IE8, S4, O10]
Defines a navigation region of a page or section. [C5, F3.6, IE8, S4,
O10]
Defines a logical region of a page or a grouping of content. [C5,
F3.6, IE8, S4, O10]
Defines an article or complete piece of content. [C5, F3.6, IE8, S4,
O10]
Defines secondary or related content. [C5, F3.6, IE8, S4, O10]
Custom data attributes
Allows addition of custom attributes to any elements using the
data- pattern. [All browsers support reading these via JavaScript’s
getAttribute() method.]
Describes an amount within a range. [C5, F3.5, S4, O10]
Control that shows real-time progress toward a goal. [Unsupported
at publication time.]
