C H A P T E R  6

HTML Elements in Context

In the chapters that follow, I describe the elements defined by HTML5. Many of these are elements that also existed in HTML4, but in many cases the meaning of the element has changed or the way in which the element can be used is different. Before we look at the elements, I want to put them in context and set the foundation for what follows. Knowing how to use the elements is as important as understanding their significance.

Understanding the Sematic/Presentation Divide

One of the major changes in HTML5 is a philosophical one—the separation between the sematic significance of an element and the effect an element has on the presentation of content. In principle, this is a sensible idea—you use HTML elements to give structure and meaning to your content and then control the presentation of that content by applying CSS styles to the elements. Not every consumer of HTML documents needs to display them, and by keeping presentation as a separate endeavor you make HTML easier to process and draw meaning from automatically.

Most of the new elements that have been added to HTML5 add a specific meaning to your content. You can use the article element (described in Chapter 10) to denote a self-contained piece of content suitable for syndication or the figure element to denote, well, a figure.

A large number of elements that existed in HTML4 originated when there was no notion of separating presentation from meaning—and that puts us in an odd situation. A great example is the b element. Until HTML5, the b element instructed the browser to show the content contained by the start and end tags as bold text. In HTML5, you don't want elements to be just presentational, so you have a new definition. Here it is:

The b element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text; for example, keywords in a document abstract, or product names in a review.

– HTML: The Markup Language, w3c.org

This is a long-winded way of telling us that the b element tells the browser to make text bold. There is no semantic significance to the b element; it is all about presentation. And this weasel-worded definition tells us something important about HTML5: we are in a period of transition. We need to preserve the old elements because they are so widely used, and dumping the HTML4 elements in HTML5 is unthinkable because it would certainly slow adoption. So we have a two-speed standard. Some of the elements, especially the new ones, have only sematic significance. Other elements, largely those with one letter tags, are so well established that we are willing to bend the presentation/semantic divide, even if we are not willing to admit this as openly as we might.

As you read through the descriptions of elements, starting in the next chapter, you will find it helpful to keep this tension between the new way of thinking and the old way in mind. It will certainly help explain some of the minor oddities you will encounter.

My advice is to err on the side of semantics and, where sensible, try to avoid elements that are largely (or solely) presentational. It is a simple matter to define a custom class and apply the required style. As long as you use the style based on the type of content (and not just the way you want the content to appear), you will preserve at least the semantic spirit.

Understanding How to Select Elements

Even if you leave the presentation issues aside, the HTML5 specification has some ambiguities. Some of the elements are very generic, and you might find this off-putting at first.

The elements are generic, but that's because HTML elements are used to mark up so many different kinds of content. Most of my writing is for books like this, so when I hear terms like section, article, heading, and figure, I think of the structure and styles that Apress requires from authors. The same terms have different meanings when applied to other kinds of content. A specification, legal contract, and blog post might all have sections, for example, but the meaning of that term for each is radically different. Rather than having a definition for a book section, a specification section, a contract section, and a blog section, we just have the general term and some degree of interpretation is required. There are some basic rules that I recommend you follow when selecting elements to apply to your content. They are described in the following sections.

Less Can Be More

It is very easy to get carried away and end up with a lot of markup in a document. You just need to add the markup to give the semantic significance your content demands. If you don't need to define complex titles, you don't need the hgroup element (described in Chapter 10), and detailed citations with the cite element (Chapter 8) are required only in documents where citations are important (such as journal articles).

Judging how much markup to apply is a matter of experience, but here is a rule of thumb: ask yourself how the semantics of an element are going to be used. I don't apply the element if I don't have an immediate answer.

Don't Abuse Elements

Each element denotes a particular kind of content, even those tricky presentation-only elements like b. When marking up content, use the elements only for their defined purpose and avoid creating private semantics. If you can't find an element that has the significance you require, consider using one of the generic elements (such as span or div) and using the class global attribute to denote the meaning in your document. Classes don't have to be used just for CSS styles.

Be Specific and Consistent

You need to pick the most specific element to represent your content. This means resisting the temptation to construct your page using generic elements when there are elements that denote the appropriate type of content. There has been a tendency in HTML4 to rely on div elements (described in Chapter 9) to build structure in a page, but the problem is that the semantics are not immediately apparent to anyone trying to process your content. You might decide to create a class called article and apply your styles using that class, but this doesn't impart the same meaning to others as using the article element.

Equally, when you use an element, make sure you apply it consistently throughout your page, site, or web application. This will make it easier for you to maintain your HTML markups and for others to process your HTML.

Don't Make Assumptions About the Audience

It is easy to assume that the consumers of your HTML care only about how the page is rendered in the browser and, as a consequence, you don't have to worry about the semantic accuracy of your markup. The whole point of the semantic/presentation divide is to make HTML easier to process programmatically and, as a consequence, you can expect this style of HTML consumption to gradually increase as HTML5 is more widely adopted and implemented. By assuming you don't have to worry about the accuracy or consistency of your markups, you make it harder to process your HTML, which will limit the range of purposes the user can find for your content.

Understanding Element Descriptions

As I describe each element, I provide a summary table with the key facts you need to know and which you can refer back to as you apply markup to content. Table 6-1 is an example of such a summary—it describes the ol element, which is used to denote an ordered list. (You can see full details of HTML lists in Chapter 9.)

The tables in this chapter tell you which parents are suitable for the element, the kind of content an element can contain, the style of tag that is required, the default presentation style, and whether the element is new or changed in HTML5. The information about suitable parents and content is based on the element categories I described in Chapter 3—principally flow and phrasing elements.

Element Quick Reference

The following tables are a quick reference for all of the HTML5 elements that I describe in the following chapters.

The Document and Metadata Elements

Table 6-2 summarizes the document and metadata elements, which are described in detail in Chapter 7. These elements are used to create the superstructure of an HTML document, to provide information to the browser about the document, and to define scripts and CSS styles and content that will be displayed if scripts are disabled in the browser.

The Text Elements

The text elements are applied to content to give basic structure and meaning. Table 6-3 summarizes these elements, which are described fully in Chapter 8.

Grouping Content

The elements in Table 6-4 are used to associate related content in groups. The full details of these elements can be found in Chapter 9.

Sectioning Content

The elements in Table 6-5 are used to break down the content so that each concept, idea, or topic is isolated. Many of these elements are new, and they provide a lot of the foundation for separating the meaning of elements from their appearance. You can learn more about these elements in Chapter 10.

Creating Tables

The elements in Table 6-6 are used to create tables to show data in a grid. The main change in HTML5 is that you can no longer use tables to manage the layout of pages. Instead, you must use the CSS table features, which I described in Chapter 21.

Creating Forms

The elements in Table 6-7 are used to create HTML forms you can use to solicit input from the user. This area of HTML has received a lot of attention in HTML5, and it has many new elements and features, including the ability to validate input on the client before the user is able to submit the form. I describe the HTML form elements in Chapters 12, 13, and 14. Of particular interest are the new types of input element, which I introduce in Chapter 12 and cover in depth in Chapter 13.

Embedding Content

The elements in Table 6-8 are used to embed content into an HTML document. Some of these elements are described in Chapter 15, and others are covered in later parts of this book.

Unimplemented Elements

There are two elements that no browser currently implements and that are only vaguely described in the HTML5 specifications. These elements are command and menu. At a high level, they are intended to make working with menus and user-interface elements simpler, but I am unable to present any detailed information in this book. I hope that subsequent versions of browsers will start to form a de facto consensus as to the meaning of these elements.

Summary

In this chapter, I provided some context for the detailed descriptions of the HTML5 elements that appear in the chapters that follow. I also provided a quick reference so that you can find the description of an element when you need to refresh your memory in the future. As you start to learn about the elements and attributes in HTML, you should remember the core advice I offered at the start of the chapter: use the most specific element possible, don't misuse elements, and use elements consistently within your documents and across your web site or web application.