HTML5 and CSS3, Second Edition

(singke) #1
HTML5 specification introduces new tags specifically designed to divide a
page into logical regions.

In addition to these new structural tags, we’ll talk about a few other tags, like
<meter> and <progress>, 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 cover how to use
the right tag for the right job. Together with HTML5, we can help wipe out
Divitis in our lifetime.

In this chapter, we’ll explore these new elements and features:


<header>
Defines a header region of a page or section. [C5, F3.6, S4, IE8, O10]

<footer>
Defines a footer region of a page or section. [C5, F3.6, S4, IE8, O10]

<nav>
Defines a navigation region of a page or section. [C5, F3.6, S4, IE8, O10]

<section>
Defines a logical region of a page or a grouping of content. [C5, F3.6, S4,
IE8, O10]

<article>
Defines an article or complete piece of content. [C5, F3.6, S4, IE8, O10]

<aside>
Defines secondary or related content. [C5, F3.6, S4, IE8, O10]

Description lists
Defines a list of names and associated values, like definitions and
descriptions. [All browsers]

<meter>
Describes a quantity within a range. [C8, F16, S6, O11]

<progress>
Control that shows real-time progress toward a goal. [C8, F6, S6, IE10,
O11]

Custom data attributes
Allow the addition of custom attributes to any elements that use the
data- pattern.[All browsers support reading these via JavaScript’s getAttribute()
method.]

Chapter 2. New Structural Tags and Attributes • 14


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf