Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 27

C H A P T E R 2
Using the Right Tag for the Right Job
With HTML5, web developers are given an even wider palette of HTML elements with
which to paint meaning into their pages. Many new elements have been introduced to
more precisely mark up, define, and organize content. Understanding when and where
to use the many elements within HTML is integral toward creating logically structured,
specification-conforming, semantically rich web pages.
This chapter will provide an overview of the elements available in HTML5, both newly
added and those inherited from HTML 4.01. That's a possibly daunting task, you might
think! After all, there is an 800+ page specification that covers them all (the current
length of the full WHATWG HTML specification, as of July 2011). To make tackling the
longish list of elements easier, we'll examine the elements in sets and will devote separ-
ate chapters to further examine groups of elements of particular interest. The elements in
HTML can be loosely grouped together in the following sets:
• Root element: The html element rightly stands alone, because it is the
only element that contains all the other elements in a document.
• Document metadata and scripting elements: The head element con-
tains metadata for the document, as well as CSS styles and JavaScript
in many cases.
• Document sectioning elements: The body element encloses the con-
tent of the page, and new semantic sectioning elements define the head-
er, footer, articles, and other sections on the page. These will be dis-
cussed in detail in Chapter 3 .
• Content grouping elements: The content in a specific section of the
web page may be organized into paragraphs, lists, block quotes, figures,
and so on.
• Text-level semantics elements: Individual runs of text may have words
or sentences marked up to provide fine-grained control over the con-