Chapter 4
Figure 4-1. Some example text, with and without structure
Semantics is the study of meaning in language. Web developers have borrowed the term from the field of
linguistics and use it to refer to the inherent meaning of an HTML element or attribute. Is this block of text a
quotation? Mark it as a quotation. Is this string of words the title for an article? There’s a tag for that. What
about that list: do the items have to be in a particular sequence, or is the order unimportant? HTML has
elements for both options. As you assemble your documents, consider the meaning and purpose of each
bit of content and choose the most semantically appropriate HTML element to suit that purpose.
Providing a solid structure for your content will make it stronger and more flexible. By using semantic
HTML to tell the browser that “this is a heading” and “this is a paragraph” and “this word is emphasized,”
you’ll make your content work better, for both machines and people alike. In the course of organizing your
content logically with the proper elements, you’ll also build in the sturdy framework you’ll need to style your
pages with CSS.
Logical Sections
HTML elements describe the nature and purpose of their contents, with specific elements for headings,
paragraphs, quotations, lists, and so on, and we’ll cover most of those elements in this chapter. In addition
to marking up these bite-sized portions of text, you can also use HTML to divide your document into larger
blocks, collecting related content and elements together into logical sections. Your content might be an
article comprising several paragraphs as well as a title and a few subheadings, with some footnotes and
an author byline for good measure. You can gather all of that content together into one semantic unit with
the article element, declaring that not only do your various bits of text serve different purposes, but also
that all of them together form a cohesive whole.
If you like, you could further divide that article into distinct sections for each topic, and those sections
would still be part of the larger article that contains them. Or perhaps your document features several
separate articles—you could group all of them into one big section of the document, and still include lesser
sections within each article.
HTML5 introduces a number of special sectioning elements to help you organize your content and collect
elements together into unified, semantic chunks. These elements—section, article, aside, and nav—
