Once your content is ready to go (you’ve proofread it, right?) and you’ve added the markup to structure the document (<!DOCTYPE>, html, head, title, meta charset, and body), you are ready to identify the elements in the content. This chapter introduces the elements you have to choose from for marking up text. There probably aren’t as many of them as you might think, and really just a handful that you’ll use with regularity. That said, this chapter is a big one and covers a lot of ground.

As we begin our tour of elements, I want to reiterate how important it is to choose elements semantically—that is, in a way that most accurately describes the content’s meaning. If you don’t like how it looks, change it with a style sheet. A semantically marked-up document ensures your content is available and accessible in the widest range of browsing environments, from desktop computers and mobile devices to assistive screen readers. It also allows non-human readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page.

With these principles in mind, it is time to meet the HTML text elements, starting with the most basic element of them all, the humble paragraph.

NOTE

I will be teaching markup according to the HTML5 standard maintained by the W3C (www.w3.org/TR/html5/). As of this writing, the latest version is the HTML 5.2 Proposed Recommendation (www.w3.org/TR/html52/).

Paragraphs

Paragraph element

Paragraphs are the most rudimentary elements of a text document. Indicate a paragraph with the p element by inserting an opening <p> tag at the beginning of the paragraph and a closing </p> tag after it, as shown in this example:

<p>Serif typefaces have small slabs at the ends of letter strokes. In

general, serif fonts can make large amounts of text easier to read.</p>

<p>Sans-serif fonts do not have serif slabs; their strokes are square

on the end. Helvetica and Arial are examples of sans-serif fonts.

In general, sans-serif fonts appear sleeker and more modern.</p>

Visual browsers nearly always display paragraphs on new lines with a bit of space between them by default (to use a term from CSS, they are displayed as a block). Paragraphs may contain text, images, and other inline elements (called phrasing content), but they may not contain headings, lists, sectioning elements, or any elements that typically display as blocks by default.

Technically, it is OK to omit the closing </p> tag because it is not required in order for the document to be valid. A browser just assumes it is closed when it encounters the next block element. Many web developers, including myself, prefer to close paragraphs and all elements for the sake of consistency and clarity. I recommend folks who are just learning markup do the same.

Headings

Heading elements

In the last chapter, we used the h1 and h2 elements to indicate headings for the Black Goose Bistro page. There are actually six levels of headings, from h1 to h6. When you add headings to content, the browser uses them to create a document outline for the page. Assistive reading devices such as screen readers use the document outline to help users quickly scan and navigate through a page. In addition, search engines look at heading levels as part of their algorithms (information in higher heading levels may be given more weight). For these reasons, it is a best practice to start with the Level 1 heading (h1) and work down in numerical order, creating a logical document structure and outline.

This example shows the markup for four heading levels. Additional heading levels would be marked up in a similar manner.

<h1>Type Design</h1>

<h2>Serif Typefaces</h2>

<p>Serif typefaces have small slabs at the ends of letter strokes.

In general, serif fonts can make large amounts of text easier to

read.</p>

<h3>Baskerville</h3>

<h4>Description</h4>

<p>Description of the Baskerville typeface.</p>

<h4>History</h4>

<p>The history of the Baskerville typeface.</p>

<h3>Georgia</h3>

<p>Description and history of the Georgia typeface.</p>

<h2>Sans-serif Typefaces</h2>

<p>Sans-serif typefaces do not have slabs at the ends of strokes.</p>

The markup in this example would create the following document outline:

By default, the headings in our example display in bold text, starting in very large type for h1s, with each consecutive level in smaller text, as shown in Figure 5-1. You can use a style sheet to change their appearance.

Figure 5-1. The default rendering of four heading levels.

Thematic Breaks (Horizontal Rule)

<hr>

A horizontal rule

If you want to indicate that one topic has completed and another one is beginning, you can insert what the spec calls a “paragraph-level thematic break” with the hr element. The hr element adds a logical divider between sections of a page or paragraphs without introducing a new heading level.

In older HTML versions, hr was defined as a “horizontal rule” because it inserts a horizontal line on the page. Browsers still render hr as a 3-D shaded rule and put it on a line by itself with some space above and below by default; but in the HTML5 spec, it has a new semantic name and definition. If a decorative line is all you’re after, it is better to create a rule by specifying a colored border before or after an element with CSS.

hr is an empty element—you just drop it into place where you want the thematic break to occur, as shown in this example and Figure 5-2:

<h3>Times</h3>

<p>Description and history of the Times typeface.</p>

<hr>

<h3>Georgia</h3>

<p>Description and history of the Georgia typeface.</p>

Figure 5-2. The default rendering of a thematic break (horizontal rule).

Lists

Humans are natural list makers, and HTML provides elements for marking up three types of lists:

Unordered lists

Collections of items that appear in no particular order

Ordered lists

Lists in which the sequence of the items is important

Description lists

Lists that consist of name and value pairs, including but not limited to terms and definitions

All list elements—the lists themselves and the items that go in them—are displayed as block elements by default, which means that they start on a new line and have some space above and below, but that may be altered with CSS. In this section, we’ll look at each list type in detail.

Unordered Lists

Unordered list

List item within an unordered list

Just about any list of examples, names, components, thoughts, or options qualifies as an unordered list. In fact, most lists fall into this category. By default, unordered lists display with a bullet before each list item, but you can change that with a style sheet, as you’ll see in a moment.

To identify an unordered list, mark it up as a ul element. The opening <ul> tag goes before the first list item, and the closing tag </ul> goes after the last item. Then, to mark up each item in the list as a list item (li), enclose it in opening and closing li tags, as shown in this example. Notice that there are no bullets in the source document. The browser adds them automatically (Figure 5-3).

The only thing that is permitted within an unordered list (that is, between the start and end ul tags) is one or more list items. You can’t put other elements in there, and there may not be any untagged text. However, you can put any type of content element within a list item (li):

<ul>

  <li>Serif</li>

  <li>Sans-serif</li>

  <li>Script</li>

  <li>Display</li>

  <li>Dingbats</li>

</ul>

Figure 5-3. The default rendering of the sample unordered list. The browser adds the bullets automatically.

But here’s the cool part. We can take that same unordered list markup and radically change its appearance by applying different style sheets, as shown in Figure 5-4. In the figure, I’ve turned off the bullets, added bullets of my own, made the items line up horizontally, and even made them look like graphical buttons. The markup stays exactly the same.

Figure 5-4. With style sheets, you can give the same unordered list many looks.

Nesting Lists

Any list can be nested within another list; it just has to be placed within a list item. This example shows the structure of an unordered list nested in the second item of an ordered list:

<ol>

  <li></li>

  <li>

    <ul>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </li>

</ol>

When you nest an unordered list within another unordered list, the browser automatically changes the bullet style for the second-level list. Unfortunately, the numbering style is not changed by default when you nest ordered lists. You need to set the numbering styles yourself with CSS rules.

Ordered Lists

Ordered list

List item within an ordered list

Ordered lists are for items that occur in a particular order, such as step-by-step instructions or driving directions. They work just like the unordered lists described earlier, but they are defined with the ol element (for “ordered list,” of course). Instead of bullets, the browser automatically inserts numbers before ordered list items (see Note), so you don’t need to number them in the source document. This makes it easy to rearrange list items without renumbering them.

Note

If something is logically an ordered list, but you don’t want numbers to display, remember that you can always remove the numbering with style sheets. So go ahead and mark up the list semantically as an ol and adjust how it displays with a style rule.

Ordered list elements must contain one or more list item elements, as shown in this example and in Figure 5-5:

<ol>

  <li>Gutenberg develops moveable type (1450s)</li>

  <li>Linotype is introduced (1890s)</li>

  <li>Photocomposition catches on (1950s)</li>

  <li>Type goes digital (1980s)</li>

</ol>

Figure 5-5. The default rendering of an ordered list. The browser adds the numbers automatically.

If you want a numbered list to start at a number other than 1, you can use the start attribute in the ol element to specify another starting number, as shown here:

<ol start="17">

  <li>Highlight the text with the text tool.</li>

  <li>Select the Character tab.</li>

  <li>Choose a typeface from the pop-up menu.</li>

</ol>

The resulting list items would be numbered 17, 18, and 19, consecutively.

Changing Bullets and Numbering

You can use the list-style-type style sheet property to change the bullets and numbers for lists. For example, for unordered lists, you can change the shape from the default dot to a square or an open circle, substitute your own image, or remove the bullet altogether. For ordered lists, you can change the numbers to Roman numerals (I, II, III, or i, ii, iii), letters (A, B, C, or a, b, c), and several other numbering schemes. In fact, as long as the list is marked up semantically, it doesn’t need to display with bullets or numbering at all. Changing the style of lists with CSS is covered in Chapter 12, Formatting Text.

Description Lists

A description list

A name, such as a term or label

A value, such as a description or definition

Description lists are used for any type of name/value pairs, such as terms and their definitions, questions and answers, or other types of terms and their associated information. Their structure is a bit different from the other two lists that we just discussed. The whole description list is marked up as a dl element. The content of a dl is some number of dt elements indicating the names, and dd elements for their respective values. I find it helpful to think of them as “terms” (to remember the “t” in dt) and “definitions” (for the “d” in dd), even though that is only one use of description lists.

Here is an example of a list that associates forms of typesetting with their descriptions (Figure 5-6):

<dl>

  <dt>Linotype</dt>

  <dd>Line-casting allowed type to be selected, used, then recirculated

into the machine automatically. This advance increased the speed of

typesetting and printing dramatically.</dd>

  <dt>Photocomposition</dt>

  <dd>Typefaces are stored on film then projected onto photo-sensitive

paper. Lenses adjust the size of the type.</dd>

  <dt>Digital type</dt>

  <dd><p>Digital typefaces store the outline of the font shape in a

format such as Postscript. The outline may be scaled to any size for

output.</p>

	 <p>Postscript emerged as a standard due to its support of

graphics and its early support on the Macintosh computer and Apple

laser printer.</p>

  </dd>

</dl>

Figure 5-6. The default rendering of a definition list. Definitions are set off from the terms by an indent.

The dl element is allowed to contain only dt and dd elements. You cannot put headings or content-grouping elements (like paragraphs) in names (dt), but the value (dd) can contain any type of flow content. For example, the last dd element in the previous example contains two paragraph elements (the awkward default spacing could be cleaned up with a style sheet).

It is permitted to have multiple definitions with one term and vice versa. Here, each term-description group has one term and multiple definitions:

<dl>

  <dt>Serif examples</dt>

  <dd>Baskerville</dd>

  <dd>Goudy</dd>

  <dt>Sans-serif examples</dt>

  <dd>Helvetica</dd>

  <dd>Futura</dd>

  <dd>Avenir</dd>

</dl>

Organizing Page Content

So far, the elements we’ve covered handle very specific tidbits of content: a paragraph, a heading, a figure, and so on. Prior to HTML5, there was no way to group these bits into larger parts other than wrapping them in a generic division (div) element (I’ll cover div in more detail later). HTML5 introduced new elements that give semantic meaning to sections of a typical web page or application (see Note), including main content (main), headers (header), footers (footer), sections (section), articles (article), navigation (nav), and tangentially related or complementary content (aside). Curiously, the spec lists the old address element as a section as well, so we’ll look at that one here too.

HTML5 Support in Internet Explorer

Nearly all browsers today support the HTML5 semantic elements, and for those that don’t, creating a style sheet rule that tells browsers to format each one as a block-level element is all you need to make them behave correctly:

section, article, nav, aside, header, footer, main {

  display: block;

Unfortunately, that fix won’t work for the small fraction of users who are still using Internet Explorer versions 8 and earlier (less than 1.5% of browser traffic as of 2017). IE8 has been hanging around well past its prime because it is tied to the popular Windows Vista operating system. If you work on a large site for which 1% of users represents thousands of people, you may want to be familiar with workarounds and fallbacks for IE8. Most likely, you won’t need to support it. Still, at the risk of looking outdated, I will provide notes about IE8 support throughout this book.

For example, the following is a workaround that applies only to IE8 and earlier. Not only do those browsers not recognize the HTML5 elements, but they also ignore any styles applied to them. The solution is to use JavaScript to create each element so IE knows it exists and will allow nesting and styling. Here’s what a JavaScript command creating the section element looks like:

documencreateElement("section");

Fortunately, Remy Sharp wrote a script that creates all of the HTML5 elements for IE8 and earlier in one fell swoop. It is called “HTML5 Shiv” (or Shim) and it is available on a server that you can point to in your documents. Just copy this code in the head of your document and use a style sheet to style the new elements as blocks:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/ html5shiv.min.js">
</script >
<![endif]-->

The HTML5 Shiv is also part of the Modernizr polyfill script that adds HTML5 and CSS3 functionality to older non-supporting browsers. Read more about Modernizr online at modernizr.com. It is also covered in Chapter 20, Modern Web Development Tools.

Main Content

Primary content area of page or app

Web pages these days are loaded with different types of content: mastheads, sidebars, ads, footers, more ads, even more ads, and so on. It is helpful to cut to the chase and explicitly point out the main content on the page. Use the main element to identify the primary content of a page or application. It helps screen readers and other assistive technologies know where the main content of the page begins and replaces the “Skip to main content” links that have been utilized in the past. The content of a main element should be unique to that page. In other words, headers, sidebars, and other elements that appear across multiple pages in a site should not be included in the main section:

<body>

<header>…</header>

<main>

  <h1>Humanist Sans Serif</h1>

  <!-- code continues -->

</main>

</body>

The W3C HTML5 specification states that pages should have only one main section and that it should not be nested within an article, aside, header, footer, or nav. Doing so will cause the document to be invalid.

The main element is the most recent addition to the roster of HTML5 grouping elements. You can use it and style it in most browsers, but for Internet Explorer (including version 11, the most current as of this writing), you’ll need to create the element with JavaScript and set its display to block with a style sheet, as discussed in the “HTML5 Support in Internet Explorer” sidebar. Note that main is supported in MS Edge.

Headers and Footers

Introductory material for page, section, or article

Footer for page, section, or article

Because web authors have been labeling header and footer sections in their documents for years, it was kind of a no-brainer that full-fledged header and footer elements would come in handy. Let’s start with headers.

Headers

The header element is used for introductory material that typically appears at the beginning of a web page or at the top of a section or article (we’ll get to those elements next). There is no specified list of what a header must or should contain; anything that makes sense as the introduction to a page or section is acceptable. In the following example, the document header includes a logo image, the site title, and navigation:

<body>

<header>

  <img src="/images/logo.png" alt="logo">

  <h1>Nuts about Web Fonts</h1>

  <nav>

    <ul>

      <li><a href="/">Home</a></li>

      <li><a href="/">Blog</a></li>

      <li><a href="/">Shop</a></li>

    </ul>

  </nav>

</header>

<!--page content-->

</body>

Note

The <a href="/"></a> code in the examples is the markup for adding links to other web pages. We’ll take on links in Chapter 6, Adding Links. Normally the value would be the URL to the page, but I’ve used a simple slash as a space-saving measure.

When used in an individual article, the header might include the article title, author, and the publication date, as shown here:

<article>

  <header>

    <h1>More about WOFF</h1>
    <p>by Jennifer Robbins, <time datetime="2017-11-11">November 11, 2017</time></p>

  </header>

  <!-- article content here -->

</article>

Note

Neither header nor footer elements are permitted to contain nested header or footer elements.

Footers

The footer element is used to indicate the type of information that typically comes at the end of a page or an article, such as its author, copyright information, related documents, or navigation. The footer element may apply to the entire document, or it could be associated with a particular section or article. If the footer is contained directly within the body element, either before or after all the other body content, then it applies to the entire page or application. If it is contained in a sectioning element (section, article, nav, or aside), it is parsed as the footer for just that section. Note that although it is called “footer,” there is no requirement that it appear last in the document or sectioning element. It could also appear at or near the beginning if that makes sense.

In this simple example, we see the typical information listed at the bottom of an article marked up as a footer:

<article>

  <header>

    <h1>More about WOFF</h1>

    <p>by Jennifer Robbins, <time datetime="2017-11-11">November 11, 2017</time></p>

  </header>

  <!-- article content here -->

  <footer>

    <p><small>Copyright &copy;2017 Jennifer Robbins.</small></p>

    <nav>

      <ul>

        <li><a href="/">Previous</a></li>

        <li><a href="/">Next</a></li>

      </ul>

    </nav>

  </footer>

</article>

Note

The time element will be discussed in the section “Dates and times” later in this chapter.

Sections and Articles

Thematic group of content

Self-contained, reusable composition

Long documents are easier to use when they are divided into smaller parts. For example, books are divided into chapters, and newspapers have sections for local news, sports, comics, and so on. To divide long web documents into thematic sections, use the aptly named section element. Sections typically include a heading (inside the section element) plus content that has a meaningful reason to be grouped together.

NOTE

The HTML5 spec recommends that if the purpose for grouping the elements is simply to provide a hook for styling, use the generic div element instead.

The section element has a broad range of uses, from dividing a whole page into major sections or identifying thematic sections within a single article. In the following example, a document with information about typography resources has been divided into two sections based on resource type:

<section>

  <h2>Typography Books</h2>

  <ul>

     <li>…</li>

  </ul>

</section>

<section>

  <h2>Online Tutorials</h2>

  <p>These are the best tutorials on the web.</p>

  <ul>

    <li>…</li>

  </ul>

</section>

Use the article element for self-contained works that could stand alone or be reused in a different context (such as syndication). It is useful for magazine or newspaper articles, blog posts, comments, or other items that could be extracted for external use. You can think of it as a specialized section element that answers “yes” to the question “Could this appear on another site and make sense?”

A long article could be broken into a number of sections, as shown here:

<article>

  <h1>Get to Know Helvetica</h1>

  <section>

    <h2>History of Helvetica</h2>

    <p>…</p>

  </section>

  <section>

    <h2>Helvetica Today</h2>

    <p>…</p>

  </section>

</article>

Conversely, a section in a web document might be composed of a number of articles:

<section id="essays">

  <article>

    <h1>A Fresh Look at Futura</h1>

    <p>…</p>

  </article>

  <article>

    <h1>Getting Personal with Humanist</h1>

    <p>…</p>

  </article>

</section>

The section and article elements are easily confused, particularly because it is possible to nest one in the other and vice versa. Keep in mind that if the content is self-contained and could appear outside the current context, it is best marked up as an article.

Aside (Sidebars)

Tangentially related material

The aside element identifies content that is separate from, but tangentially related to, the surrounding content. In print, its equivalent is a sidebar, but it couldn’t be called “sidebar” because putting something on the “side” is a presentational description, not semantic. Nonetheless, a sidebar is a good mental model for using the aside element. aside can be used for pull quotes, background information, lists of links, callouts, or anything else that might be associated with (but not critical to) a document.

In this example, an aside element is used for a list of links related to the main article:

<h1>Web Typography</h1>

<p>Back in 1997, there were competing font formats and tools for making them…</p>

<p>We now have a number of methods for using beautiful fonts on web pages…</p>

<aside>

  <h2>Web Font Resources</h2>

  <ul>

    <li><a href="http://typekit.com/">Typekit</a></li>

    <li><a href="http://fonts.google.com">Google Fonts</a></li>

  </ul>

</aside>

The aside element has no default rendering, so you will need to make it a block element and adjust its appearance and layout with style sheet rules.

Navigation

Primary navigation links

The nav element gives developers a semantic way to identify navigation for a site. Earlier in this chapter, we saw an unordered list that might be used as the top-level navigation for a font catalog site. Wrapping that list in a nav element makes its purpose explicitly clear:

<nav>

  <ul>

    <li><a href="/">Serif</a></li>

    <li><a href="/">Sans-serif</a></li>

    <li><a href="/">Script</a></li>

    <li><a href="/">Display</a></li>

    <li><a href="/">Dingbats</a></li>

  </ul>

</nav>

Not all lists of links should be wrapped in nav tags, however. The spec makes it clear that nav should be used for links that provide primary navigation around a site or a lengthy section or article. The nav element may be especially helpful from an accessibility perspective.

Addresses

Contact information

Last, and well, least, is the address element that is used to create an area for contact information for the author or maintainer of the document. It is generally placed at the end of the document or in a section or article within a document. An address would be right at home in a footer element. It is important to note that the address element should not be used for any old address on a page, such as mailing addresses. It is intended specifically for author contact information (although that could potentially be a mailing address). Following is an example of its intended use:

<address>

Contributed by <a href="../authors/robbins/">Jennifer Robbins</a>,

<a href="http://www.oreilly.com/">O'Reilly Media</a>

</address>

Document Outlines

Behind the scenes, browsers look at the markup in a document and generate a hierarchical outline based on the headings in the content. A new section gets added to the outline whenever the browser encounters a new heading level.

In past versions of HTML, that was the only way the outline was created. HTML5 introduced a new outline algorithm that enables authors to explicitly add a new section to the outline by inserting a sectioning element: article, section, aside, and nav. In addition to the four sectioning elements, the spec defines some elements (blockquote, fieldset, figure, dialog, details, and td) as sectioning roots, which means headings in those elements do not become part of the overall document outline.

It’s a nice idea because it allows content to be repurposed and merged without breaking the outline, but unfortunately, no browsers to date have implemented it and they are unlikely to do so. The W3C has kept the sectioning elements and their intended behavior in the spec (which is why I mention this at all), but now precede it with a banner recommending sticking with the old hierarchical heading method.

The Inline Element Roundup

Now that we’ve identified the larger chunks of content, we can provide semantic meaning to phrases within the chunks by using what the HTML5 specification calls text-level semantic elements. On the street, you are likely to hear them called inline elements because they display in the flow of text by default and do not cause any line breaks. That’s also how they were referred to in HTML versions prior to HTML5.

Text-Level (Inline) Elements

Despite all the types of information you could add to a document, there are only a couple dozen text-level semantic elements. Table 5-1 lists all of them.

Table 5-1. Text-level semantic elements
Element	Description
a	An anchor or hypertext link (see Chapter 6 for details)
abbr	Abbreviation
b	Added visual attention, such as keywords (bold)
bdi	Indicates text that may have directional requirements
bdo	Bidirectional override; explicitly indicates text direction (left to right, ltr, or right to left, rtl)
br	Line break
cite	Citation; a reference to the title of a work, such as a book title
code	Computer code sample
data	Machine-readable equivalent dates, time, weights, and other measurable values
del	Deleted text; indicates an edit made to a document
dfn	The defining instance or first occurrence of a term
em	Emphasized text
i	Alternative voice (italic) or alternate language
ins	Inserted text; indicates an insertion in a document
kbd	Keyboard; text entered by a user (for technical documents)
mark	Contextually relevant text
q	Short, inline quotation
ruby, rt, rp	Provides annotations or pronunciation guides under East Asian typography and ideographs
s	Incorrect text (strike-through)
samp	Sample output from programs
small	Small print, such as a copyright or legal notice (displayed in a smaller type size)
span	Generic phrase content
strong	Content of strong importance
sub	Subscript
sup	Superscript
time	Machine-readable time data
u	Indicates a formal name, misspelled word, or text that would be underlined
var	A variable or program argument (for technical documents)
wbr	Word break

The Inline Elements Backstory

Many of the inline elements that have been around since the dawn of the web were introduced to change the visual formatting of text selections because of the lack of a style sheet system. If you wanted bolded text, you marked it as b. Italics? Use the i element. In fact, there was once a font element used solely to change the font, color, and size of text (the horror!). Not surprisingly, HTML5 kicked the purely presentational font element to the curb. However, many of the old-school presentational inline elements (for example, u for underline and s for strike-through) have been kept in HTML5 and given new semantic definitions (b is now for “keywords,” s for “inaccurate text”).

Many inline elements have the expected style rendering (bold for the b element, for example). Other inline elements are purely semantic (such as abbr or time) and don’t have default renderings. For any inline elements, you can use CSS rules if you want to change the way they display.

Although it may be handy seeing all of the text-level elements listed together in a table, they certainly deserve more detailed explanations.

Emphasized text

Stressed emphasis

Use the em element to indicate which part of a sentence should be stressed or emphasized. The placement of em elements affects how a sentence’s meaning is interpreted. Consider the following sentences that are identical, except for which words are stressed:

<p><em>Arlo</em> is very smart.</p>

<p>Arlo is <em>very</em> smart.</p>

The first sentence indicates who is very smart. The second example is about how smart he is. Notice that the em element has an effect on the meaning of the sentence.

Emphasized text (em) elements nearly always display in italics by default (Figure 5-9), but of course you can make them display any way you like with a style sheet. Screen readers may use a different tone of voice to convey stressed content, which is why you should use an em element only when it makes sense semantically, not just to achieve italic text.

Important text

Strong importance

The strong element indicates that a word or phrase is important, serious, or urgent. In the following example, the strong element identifies the portion of instructions that requires extra attention. The strong element does not change the meaning of the sentence; it merely draws attention to the important parts:

<p>When returning the car, <strong>drop the keys in the red box by the front desk</strong>.</p>

Visual browsers typically display strong text elements in bold text by default. Screen readers may use a distinct tone of voice for important content, so mark text as strong only when it makes sense semantically, not just to make text bold.

The following is a brief example of our em and strong text examples. Figure 5-9 should hold no surprises.

Figure 5-9. The default rendering of emphasized and strong text.

Elements originally named for their presentational properties

Keywords or visually
emphasized text (bold)

Alternative voice (italic)

Incorrect text (strike-through)

Annotated text (underline)

Legal text; small print (smaller type size)

As long as we’re talking about bold and italic text, let’s see what the old b and i elements are up to now. The elements b, i, u, s, and small were introduced in the old days of the web as a way to provide typesetting instructions (bold, italic, underline, strike-through, and smaller text, respectively). Despite their original presentational purposes, these elements have been included in HTML5 and given updated, semantic definitions based on patterns of how they’ve been used. Browsers still render them by default as you’d expect (Figure 5-10). However, if a type style change is all you’re after, using a style sheet rule is the appropriate solution. Save these for when they are semantically appropriate.

Figure 5-10. The default rendering of b, i, s, u, and small elements.

Let’s look at these elements and their correct usage, as well as the style sheet alternatives.

b

Keywords, product names, and other phrases that need to stand out from the surrounding text without conveying added importance or emphasis (see Note). [Old definition: Bold]

CSS Property: For bold text, use font-weight. Example: font-weight: bold;

Example: <p>The slabs at the ends of letter strokes are called <b>serifs</b>.</p>

NOTE

It helps me to think about how a screen reader would read the text. If I don’t want the word read in a loud, emphatic tone of voice, but it really should be bold, then b may be more appropriate than strong.

i

Indicates text that is in a different voice or mood than the surrounding text, such as a phrase from another language, a technical term, or a thought. [Old definition: Italic]

CSS Property: For italic text, use font-style. Example: font-style: italic;

Example: <p>Simply change the font and <i>Voila!</i>, a new personality!</p>

s

Indicates text that is incorrect. [Old definition: Strike-through text]

CSS Property: To draw a line through a selection of text, use text-decoration. Example: text-decoration: line-through

Example: <p>Scala Sans was designed by <s>Eric Gill</s> Martin Majoor.</p>

u

There are a few instances when underlining has semantic significance, such as underlining a formal name in Chinese or indicating a misspelled word after a spell check, such as the misspelled “Helvitica” in the following example. Note that underlined text is easily confused with a link and should generally be avoided except for a few niche cases. [Old definition: Underline]

CSS Property: For underlined text, use text-decoration. Example: text-decoration: underline

Example: <p>New York subway signage is set in <u>Helviteca</u>.</p>

small

Indicates an addendum or side note to the main text, such as the legal “small print” at the bottom of a document. [Old definition: Renders in font smaller than the surrounding text]

CSS Property: To make text smaller, use font-size. Example: font-size: 80%

Example: <p><small>(This font is free for personal and commercial use.)</small></p>

Short quotations

Short inline quotation

Use the quotation (q) element to mark up short quotations, such as “To be or not to be,” in the flow of text, as shown in this example (Figure 5-11):

Matthew Carter says, <q>Our alphabet hasn't changed in eons.</q>

According to the HTML spec, browsers should add quotation marks around q elements automatically, so you don’t need to include them in the source document. Some browsers, like Firefox, render curly quotes, which is preferable. Others (Safari and Chrome, which I used for my examples) render them as straight quotes as shown in the figure.

Nesting Elements

You can apply two elements to a string of text (for example, a phrase that is both a quote and in another language), but be sure they are nested properly. That means the inner element, including its closing tag, must be completely contained within the outer element, and not overlap:

<q><i>Je ne sais pas.</i></q>

Here is an example of elements that are nested incorrectly. Notice that the inner i element is not closed within the containing q element:

<q><i>Je ne sais pas.</q></i>

It is easy to spot the nesting error in an example that is this short, but when you’re nesting long passages or nesting multiple levels deep, it is easy to end up with overlaps. One advantage to using an HTML code editor is that it can automatically close elements for you correctly or point out when you’ve made a mistake.

Abbreviations and acronyms

Abbreviation or acronym

Marking up acronyms and abbreviations with the abbr element provides useful information for search engines, screen readers, and other devices. Abbreviations are shortened versions of a word ending in a period (“Conn.” for “Connecticut,” for example). Acronyms are abbreviations formed by the first letters of the words in a phrase (such as NASA or USA). The title attribute provides the long version of the shortened term, as shown in this example:

<abbr title="Points">pts.</abbr>

<abbr title="American Type Founders">ATF</abbr>

NOTE

In HTML 4.01, there was an acronym element especially for acronyms, but HTML5 has made it obsolete in favor of using the abbr for both.

Citations

Citation

The cite element is used to identify a reference to another document, such as a book, magazine, article title, and so on. Citations are typically rendered in italic text by default. Here’s an example:

<p>Passages of this article were inspired by <cite>The Complete Manual of Typography</cite> by James Felici.</p>

Defining terms

Defining term

It is common to point out the first and defining instance of a word in a document in some fashion. In this book, defining terms are set in blue text. In HTML, you can identify them with the dfn element and format them visually using style sheets.

<p><dfn>Script typefaces</dfn> are based on handwriting.</p>

Program code elements

Code

Variable

Program sample

User-entered keyboard strokes

A number of inline elements are used for describing the parts of technical documents, such as code (code), variables (var), program samples (samp), and user-entered keyboard strokes (kbd). For me, it’s a quaint reminder of HTML’s origins in the scientific world (Tim Berners-Lee developed HTML to share documents at the CERN particle physics lab in 1989).

Code, sample, and keyboard elements typically render in a constant-width (also called monospace) font such as Courier by default. Variables usually render in italics.

Subscript and superscript

Subscript

Superscript

The subscript (sub) and superscript (sup) elements cause the selected text to display in a smaller size, positioned slightly below (sub) or above (sup) the baseline. These elements may be helpful for indicating chemical formulas or mathematical equations.

Figure 5-12 shows how these examples of subscript and superscript typically render in a browser.

 <p>H<sub>2</sub>0</p>

 <p>E=MC<sup>2</sup></p>

Highlighted text

Contextually relevant text

The mark element indicates a word that may be considered especially relevant to the reader. One might use it to dynamically highlight a search term in a page of results, to manually call attention to a passage of text, or to indicate the current page in a series. Some designers (and browsers) give marked text a light colored background as though it were marked with a highlighter marker, as shown in Figure 5-13.

<p> ... PART I. ADMINISTRATION OF THE GOVERNMENT. TITLE IX.

TAXATION. CHAPTER 65C. MASS. <mark>ESTATE TAX</mark>. Chapter 65C: Sect. 2. Computation of <mark>estate tax</mark>.</p>

Figure 5-13. In this example, search terms are identified with mark elements and given a yellow background with a style sheet so they are easier for the reader to find.

Dates and times

Time data

When we look at the phrase “noon on November 4,” we know that it is a date and a time. But the context might not be so obvious to a computer program. The time element allows us to mark up dates and times in a way that is comfortable for a human to read, but also encoded in a standardized way that computers can use. The content of the element presents the information to people, and the datetime attribute presents the same information in a machine-readable way.

note

The time element is not intended for marking up times for which a precise time or date cannot be established, such as “the end of last year” or “the turn of the century.”

The time element indicates dates, times, or date-time combos. It might be used to pass the date and time information to an application, such as saving an event to a personal calendar. It might be used by search engines to find the most recently published articles. Or it could be used to restyle time information into an alternate format (e.g., changing 18:00 to 6 p.m.).

The datetime attribute specifies the date and/or time information in a standardized time format illustrated in Figure 5-14. The full time format begins with the date (year–month–day). The time section begins with a letter “T” and lists hours (on the 24-hour clock), minutes, seconds (optional), and milliseconds (also optional). Finally, the time zone is indicated by the number of hours behind (-) or ahead (+) of Greenwich Mean Time (GMT). For example, “-05:00” indicates the Eastern Standard time zone, which is five hours behind GMT. When identifying dates and times alone, you can omit the other sections.

Figure 5-14. Standardized date and time syntax.

Here are a few examples of valid values for datetime:

Time only: 9:30 p.m.

<time datetime="21:30">9:30p.m.</time>

Date only: June 19, 2016

<time datetime="2016-06-19">June 19, 2016</time>

Date and time: Sept. 5, 1970, 1:11a.m.

<time datetime="1970-09-05T01:11:00">Sept. 5, 1970, 1:11a.m.</time>

Date and time, with time zone information: 8:00am on July 19, 2015, in Providence, RI
```
<time datetime="2015-07-19T08:00:00-05:00">July 19, 2015, 8am, Providence RI</time>
```
Note
You can also use the time element without the datetime attribute, but its content must be a valid date/time string:
```
<time>2016-06-19</time>
```
Further Reading
For more information on the intricate ins and outs of specifying dates and times, with examples, check out the time element entry in the HTML5 specification: www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-time-element.

Machine-readable information

Machine-readable data

The data element is another tool for helping computers make sense of content. It can be used for all sorts of data, including dates, times, measurements, weights, microdata, and so on. The required value attribute provides the machine-readable information. Here are a couple of examples:

<data value="12">Twelve</data>

<data value="978-1-449-39319-9">CSS: The Definitive Guide</data>

I’m not going to go into more detail on the data element, because as a beginner, you are unlikely to be dealing with machine-readable data quite yet. But it is interesting to see how markup can be used to provide usable information to computer programs and scripts as well as to your fellow humans.

Inserted and deleted text

Inserted text

Deleted text

The ins and del elements are used to mark up edits indicating parts of a document that have been inserted or deleted (respectively). These elements rely on style rules for presentation (i.e., there is no dependable browser default). Both the ins and del elements can contain either inline or block elements, depending on what type of content they contain:

Chief Executive Officer: <del title="retired">Peter Pan</del><ins>Pippi Longstocking</ins>

Adding Breaks

Line breaks

<br>

Line break

Occasionally, you may need to add a line break within the flow of text. We’ve seen how browsers ignore line breaks in the source document, so we need a specific directive to tell the browser to “add a line break here.”

The inline line break element (br) does exactly that. The br element could be used to break up lines of addresses or poetry. It is an empty element, which means it does not have content. Just add the br element in the flow of text where you want a break to occur, as shown here and in Figure 5-15:

<p>So much depends <br>upon <br><br>a red wheel <br>barrow</p>

Figure 5-15. Line breaks are inserted at each br element. (Example extracted from “The Red Wheelbarrow” by William Carlos Williams.)

Unfortunately, the br element is easily abused. Be careful that you aren’t using br elements to force breaks into text that really ought to be a list. For example, don’t do this:

<p>Times<br>

Georgia<br>

Garamond

</p>

If it’s a list, use the semantically correct unordered list element instead, and turn off the bullets with style sheets:

<ul>

  <li>Times</li>

  <li>Georgia</li>

  <li>Garamond</li>

</ul>

Word breaks

<wbr>

Word break

The word break (wbr) element lets you mark the place where a word should break (a “line break opportunity” according to the spec) should there not be enough room for the whole word (Figure 5-16). It takes some of the guesswork away from the browser and allows authors to control the best spot for the word to be split over two lines. If there is enough room, the word stays in one piece. Without word breaks, the word stays together, and if there is not enough room, the whole word wraps to the next line. Note that the browser does not add a hyphen when the word breaks over two lines. The wbr behaves as though it were a character space in the middle of the word:

<p>The biggest word you've ever heard and this is how it goes:

<em>supercali<wbr>fragilistic<wbr>expialidocious</em>!</p>

Figure 5-16. When there is not enough room for a word to fit on a line, it will break at the location of the wbr element.

Browser support note

The wbr element is not supported by any version of Internet Explorer as of this writing. It is supported in MS Edge.

You’ve been introduced to 32 new elements since your last exercise. I’d say it’s time to give some of the inline elements a try in Exercise 5-2.

Exercise 5-2. Identifying inline elements

This little post for the Black Goose Bistro News page will give you an opportunity to identify and mark up a variety of inline elements. See if you can find phrases to mark up accurately with the following elements:

b   br   cite    dfn   em

i   q    small   time

Because markup is always somewhat subjective, your resulting markup may not look exactly like my final markup, but there is an opportunity to use all of the preceding elements in the article. For extra credit, there is a phrase that could have two elements applied to it. (Hint: look for a term in another language.) Remember to nest them properly by closing the inner element before you close the outer one. Also, be sure that all text-level elements are contained within block elements.

You can write the tags right on this page. Or, if you want to use a text editor and see the results in a browser, this text file is available online at learningwebdesign.com/5e/materials along with the resulting code.

<article>

<header>

<p>posted by BGB, November 15, 2016</p>

</header>

<h2>Low and Slow</h2>

<p>This week I am extremely excited about a new cooking technique called sous vide. In sous vide cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, Cooking for Geeks, Jeff Potter describes it as ultra-low-temperature poaching.</p>

<p>Next month, we will be serving Sous Vide Salmon with Dill Hollandaise. To reserve a seat at the chef table, contact us before November 30.</p>

<p>blackgoose@example.com

555-336-1800</p>

<p>Warning: Sous vide cooked salmon is not pasteurized. Avoid it if you are pregnant or have immunity issues.</p>

</article>

Accommodating Non-Western Languages

If the web is to reach a truly worldwide audience, it needs to be able to support the display of all the languages of the world, with all their unique alphabets, symbols, directionality, and specialized punctuation. The W3C’s efforts for internationalization (often referred to as “i18n” —an i, then 18 letters, then an n) ensure that the formats and protocols defined in web technologies are usable worldwide.

Internationalization efforts include the following:

Using the Unicode character encoding that contains the characters, glyph, symbols, ideographs, and the like from all active, modern languages. Unicode is discussed in Chapter 4, Creating a Simple Page.

Declaring the primary language of a document by using a two-letter language code from the ISO 639-1 standard (available at www.loc.gov/standards/iso639-2/php/code_list.php). For example, English is “EN,” Czech is “CS, “and German is “DE.” Use the lang attribute in the html element to declare the language for the whole document, or in individual elements that require clarification.

Accommodating the various writing directions of languages. In HTML,
the dir attribute explicitly sets the direction for the document or an element to ltr (left-to-right) or rtl (right-to-left). On phrase-level elements, it also creates a bidirectional isolation, preventing text within the element from influencing the ordering of text outside it. (This can be an important consideration when you are embedding user-generated text.)
For example, to include a passage of Hebrew in an English document, use the dir attribute to indicate that the phrase should be displayed right-to-left:
```
<p>This is how you write Shalom: 
<span dir="rtl">שלום</span></p>
```

Providing a system that allows for ruby annotation, notes that typically appear above ideographs from East Asian languages to give pronunciation clues or translations (ruby, rt, and rp elements). See the spec for details if this is something you need to do.

The W3C Internationalization Activity site provides a thorough collection of HTML and CSS authoring techniques and resources to help with your internationalization efforts: www.w3.org/International/techniques/authoring-html.

Generic Elements (div and span)

Generic block-level element

Generic inline element

What if none of the elements we’ve talked about so far accurately describes your content? After all, there are endless types of information in the world, but as you’ve seen, not all that many semantic elements. Fortunately, HTML provides two generic elements that can be customized to describe your content perfectly. The div element indicates a division of content, and span indicates a word or phrase for which no text-level element currently exists. The generic elements are given meaning and context with the id and class attributes, which we’ll discuss in a moment.

The div and span elements have no inherent presentation qualities of their own, but you can use style sheets to format them however you like. In fact, generic elements are a primary tool in standards-based web design because they enable authors to accurately describe content and offer plenty of “hooks” for adding style rules. They also allow elements on the page to be accessed and manipulated by JavaScript.

We’re going to spend a little time on div and span elements, as well as the id and class attributes, to learn how authors use them to structure content.

Divide It Up with a div

Use the div element to create a logical grouping of content or elements on the page. It indicates that they belong together in a conceptual unit or should be treated as a unit by CSS or JavaScript. By marking related content as a div and giving it a unique id or indicating that it is part of a class, you give context to the elements in the grouping. Let’s look at a few examples of div elements.

In this example, a div element is used as a container to group an image and two paragraphs into a product “listing”:

<div class="listing">

  <img src="images/felici-cover.gif" alt="">

  <p><cite>The Complete Manual of Typography</cite>, James Felici</p>

  <p>A combination of type history and examples of good and bad type design.</p>

</div>

By putting those elements in a div, I’ve made it clear that they are conceptually related. It also allows me to style p elements within listings differently than other p elements in the document.

Here is another common use of a div used to break a page into sections for layout purposes. In this example, a heading and several paragraphs are enclosed in a div and identified as the “news” division:

<div id="news">

  <h1>New This Week</h1>

  <p>We've been working on...</p>

  <p>And last but not least,... </p>

</div>

Now I have a custom element that I’ve given the name “news.” You might be thinking, “Hey Jen, couldn’t you use a section element for that?” You could! In fact, authors may turn to generic divs less often now that we have better semantic sectioning elements in HTML5.

Define a Phrase with span

A span offers the same benefits as the div element, except it is used for phrase elements and does not introduce line breaks. Because spans are inline elements, they may contain only text and other inline elements (in other words, you cannot put headings, lists, content-grouping elements, and so on, in a span). Let’s get right to some examples.

There is no telephone element, but we can use a span to give meaning to telephone numbers. In this example, each telephone number is marked up as a span and classified as “tel”:

<ul>

  <li>John: <span class="tel">999.8282</span></li>

  <li>Paul: <span class="tel">888.4889</span></li>

  <li>George: <span class="tel">888.1628</span></li>

  <li>Ringo: <span class="tel">999.3220</span></li>

</ul>

You can see how the classified spans add meaning to what otherwise might be a random string of digits. As a bonus, the span element enables us to apply the same style to phone numbers throughout the site (for example, ensuring line breaks never happen within them, using a CSS white-space: nowrap declaration). It makes the information recognizable not only to humans but also to computer programs that know that “tel” is telephone number information. In fact, some values—including “tel”—have been standardized in a markup system known as Microformats that makes web content more useful to software (see the upcoming sidebar “Structured Data in a Nutshell”).

id and class Attributes

In the previous examples, we saw the id and class attributes used to provide context to generic div and span elements. id and class have different purposes, however, and it’s important to know the difference.

Identification with id

The id attribute is used to assign a unique identifier to an element in the document. In other words, the value of id must be used only once in the document. This makes it useful for assigning a name to a particular element, as though it were a piece of data. See the sidebar “id and class Values” for information on providing values for the id attribute.

This example uses the books’ ISBNs (International Standard Book Numbers) to uniquely identify each listing. No two book listings may share the same id.

<div id="ISBN0321127307">

  <img src="felici-cover.gif" alt="">

  <p><cite>The Complete Manual of Typography</cite>, James Felici</p>

  <p>A combination of type history and examples of good and bad type.
  </p>

</div>

<div id="ISBN0881792063">

  <img src="bringhurst-cover.gif" alt="">

  <p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst
  </p>

  <p>This lovely, well-written book is concerned foremost with creating beautiful typography.</p>

</div>

Web authors also use id when identifying the various sections of a page. In the following example, there may not be more than one element with the id of “links” or “news” in the document:

<section id="news">

  <!-- news items here -->

</section>

<aside id="links">

  <!-- list of links here -->

</aside>

Classification with class

The class attribute classifies elements into conceptual groups; therefore, unlike the id attribute, a class name may be shared by multiple elements. By making elements part of the same class, you can apply styles to all of the labeled elements at once with a single style rule or manipulate them all with a script. Let’s start by classifying some elements in the earlier book example. In this first example, I’ve added class attributes to classify each div as a “listing” and to classify paragraphs as “descriptions”:

<div id="ISBN0321127307" class="listing">

  <header>

  <img src="felici-cover.gif" alt="">

  <p><cite>The Complete Manual of Typography</cite>, James Felici</p>

  </header>

  <p class="description">A combination of type history and examples of good and bad type.</p>

</div>

<div id="ISBN0881792063" class="listing">

  <header>

  <img src="bringhurst-cover.gif" alt="">

  <p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst
  </p>

  </header>

  <p class="description">This lovely, well-written book is concerned foremost with creating beautiful typography.</p>

</div>

Notice how the same element may have both a class and an id. It is also possible for elements to belong to multiple classes. When there is a list of class values, simply separate them with character spaces. In this example, I’ve classified each div as a “book” to set them apart from possible “cd” or “dvd” listings elsewhere in the document:

<div id="ISBN0321127307" class="listing book">

  <img src="felici-cover.gif" alt="CMT cover">

  <p><cite>The Complete Manual of Typography</cite>, James Felici</p>

  <p class="description">A combination of type history and examples of good and bad type.</p>

</div>

<div id="ISBN0881792063" class="listing book">

  <img src="bringhurst-cover.gif" alt="ETS cover">

  <p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst
  </p>

  <p class="description">This lovely, well-written book is concerned
  foremost with creating beautiful typography.</p>

</div>

Identify and Classify All Elements

The id and class attributes are not limited to just div and span—they are two of the global attributes (see the “Global Attributes” sidebar) in HTML, which means you may use them with all HTML elements. For example, you could identify an ordered list as “directions” instead of wrapping it in a div:

<ol id="directions">

  <li>...</li>

  <li>...</li>

  <li>...</li>

</ol>

This should have given you a good introduction to how to use the class and id attributes to add meaning and organization to documents. We’ll work with them even more in the style sheet chapters in Part III. The sidebar “Structured Data in a Nutshell” discusses more advanced ways of adding meaning and machine-readable data to documents.

Structured Data in a Nutshell

It is pretty easy for us humans to tell the difference between a recipe and a movie review. For search engines and other computer programs, however, it’s not so obvious. When we use HTML alone, all browsers see is paragraphs, headings, and other semantic elements of a document. Enter structured data! Structured data allows content to be machine-readable as well, which helps search engines provide smarter, user-friendly results and can provide a better user experience—for example, by extracting event information from a page and adding it to the user’s calendar app.

There are several standards for structured data, but they share a similar approach. First, they identify and name the “thing” being presented. Then they point out the properties of that thing. The “thing” might be a person, an event, a product, a movie…pretty much anything you can imagine seeing on a web page. Properties consist of name/value pairs. For example, “actor,” “director,” and “duration” are properties of a movie. The values of those properties appear as the content of an HTML element. A collection of the standardized terms assigned to “things,” as well as their respective properties, form what is called a vocabulary.

The most popular standards for adding structured data are Microformats, Microdata, RDFa (and RDFa Lite), and JSON-LD. They differ in the syntax they use to add information about objects and their properties.

Microformats

microformats.org

This early effort to make web content more useful created standardized values for the existing id, class, and rel HTML attributes. It is not a documented standard, but it is a convention that is in widespread use because it is very simple to implement. There are about a dozen stable Microformat vocabularies for defining people, organizations, events, products, and more. Here is a short example of how a person might be marked up using Microformats:

<div class="h-card">

  <p class="p-name">Cindy Sherman</p>

  <p class="p-tel">555.999-2456</p>

</div>

Microdata

html.spec.whatwg.org/multipage/microdata.html

Microdata is a WHATWG (Web Hypertext Application Technology Working Group) HTML standard that uses microdata-specific attributes (itemscope, itemtype, itemprop, itemid, and itemref) to define objects and their properties. Here is an example of a person defined using Microdata.

<div itemscope itemtype="http://schema.org/Person">

  <p itemprop="name">Cindy Sherman</p>

  <p itemprop="telephone">555.999-2456</p>

</div>

For more information on the WHATWG, see Appendix D, From HTML+ to HTML5.

RDFa and RDFa Lite

www.w3.org/TR/xhtml-rdfa-primer/

The W3C dropped Microdata from the HTML5 spec in 2013, putting all of its structured data efforts behind RDFa (Resource Description Framework in Attributes) and its simplified subset, RDFa Lite. It uses specified attributes (vocab, typeof, property, resource, and prefix) to enhance HTML content. Here is that same person marked up with RDFa:

<div vocab="http://schema.org" typeof="Person">

  <p property="name">Cindy Sherman</p>

  <p property="telephone">555.999-2456</p>

</div>

JSON-LD

json-ld.org

JSON-LD (JavaScript Object Notation to serialize Linked Data) is a different animal in that it puts the object types and their properties in a script removed from the HTML markup. Here is the JSON-LD version of the same person:

<script type="application/ld+json">

  "@context": "http://schema.org/",

  "@type": "Person",

  "name": "Cindy Sherman"

  "telephone": "555.999-2456"
}
</script>

It is possible to make up your own vocabulary for use on your sites, but it is more powerful to use a standardized vocabulary. The big search engines have created Schema.org, a mega-vocabulary that includes standardized properties for hundreds of “things” like blog posts, movies, books, products, reviews, people, organizations, and so on. Schema.org vocabularies may be used with Microdata, RDFa, and JSON-LD (Microformats maintain their own separate vocabularies). You can see pointers to the Schema.org “Person” vocabulary in the preceding examples. For more information, the Schema.org “Getting Started” page provides an easy-to-read introduction: schema.org/docs/gs.html.

There is a lot more to say about structured data than I can fit in this book, but once you get the basic semantics of HTML down, it is definitely a topic worthy of further exploration.

Improving Accessibility with ARIA

As web designers, we must always consider the experience of users with assistive technologies for navigating pages and interacting with web applications. Your users may be listening to the content on the page read aloud by a screen reader and using keyboards, joysticks, voice commands, or other non-mouse input devices to navigate through the page.

Many HTML elements are plainly understood when you look at (or read) only the HTML source. Elements like the title, headings, lists, images, and tables have implicit meanings in the context of a page, but generic elements like div and span lack the semantics necessary to be interpreted by an assistive device. In rich web applications, especially those that rely heavily on JavaScript and AJAX (see Note), the markup alone does not provide enough clues as to how elements are being used or whether a form control is currently selected, required, or in some other state.

Note

AJAX (Asynchronous JavaScript and XML) is explained in a sidebar in Chapter 22, Using JavaScript.

Fortunately, we have ARIA (Accessible Rich Internet Applications), a standardized set of attributes for making pages easier to navigate and interactive features easier to use. The specification was created and is maintained by a Working Group of the Web Accessibility Initiative (WAI), which is why you also hear it referred to as WAI-ARIA. ARIA defines roles, states, and properties that developers can add to markup and scripts to provide richer semantic information.

Roles

Roles describe an element’s function or purpose in the context of the document. Some roles include alert, button, dialog, slider, and menubar, to name only a few. For example, as we saw earlier, you can turn an unordered list into a tabbed menu of options using style sheets, but what if you can’t see that it is styled that way? Adding role="toolbar" to the list makes its purpose clear:

<ul id="tabs" role="toolbar">

  <li>A-G</li>

  <li>H-O</li>

  <li>P-T</li>

  <li>U-Z</li>

</ul>

Here’s another example that reveals that the “status” div is used as an alert message:

<div id="status" role="alert">You are no longer connected to the server.</div>

Some roles describe “landmarks” that help readers find their way through the document, such as navigation, banner, contentinfo, complementary, and main. You may notice that some of these sound similar to the page-structuring elements that were added in HTML5, and that’s no coincidence. One of the benefits of having improved semantic section elements is that they can be used as landmarks, replacing <div id="main" role="main"> with main.

Most current browsers already recognize the implicit roles of the new elements, but some developers explicitly add ARIA roles until all browsers comply. The sectioning elements pair with the ARIA landmark roles in the following way:

<nav role="navigation">

<header role="banner"> (see Note)

<main role="main">

<aside role="complementary">

<footer role="contentinfo">

Note

The banner role is used when the header applies to only the whole page, not just a section or article.

States and Properties

ARIA also defines a long list of states and properties that apply to interactive elements such as form widgets and dynamic content. States and properties are indicated with attributes prefixed with aria-, such as aria-disabled, aria-describedby, and many more.

The difference between a state and property is subtle. For properties, the value of the attribute is more likely to be stable, such as aria-labelledby, which associates labels with their respective form controls, or aria-haspopup, which indicates the element has a related pop-up menu. States have values that are more likely to be changed as the user interacts with the element, such as aria-selected.

For Further Reading

Obviously, this is not enough ARIA coaching to allow you to start confidently using it today, but it should give you a good feel for how it works and its potential value. When you are ready to dig in and take your skills to a professional level, here is some recommended reading:

The WAI-ARIA Working Draft (www.w3.org/TR/wai-aria-1.1/)

This is the current Working Draft of the specification as of this writing.

ARIA in HTML (www.w3.org/TR/html-aria/)

This W3C Working Draft helps developers use ARIA attributes with HTML correctly. It features a great list of every HTML element, whether it has an implicit role (in which ARIA should not be used), and what roles, states, and properties apply.

ARIA Resources at MDN Web Docs
(developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

This site features lots of links to ARIA-related and up-to-date resources. It is a good starting point for exploration.

HTML5 Accessibility (www.html5accessibility.com)

This site tests which new HTML5 features are accessibly supported by major browsers.

Character Escapes

There’s just one more text-related topic before we close out this chapter. The section title makes it sound like someone left the gate open and all the characters got out. The real meaning is more mundane, albeit useful to know.

You already know that as a browser parses an HTML document, when it runs into a < symbol, it interprets it as the beginning of a tag. But what if you just need a less-than symbol in your text? Characters that might be misinterpreted as code need to be escaped in the source document. Escaping means that instead of typing in the character itself, you represent it by its numeric or named character entity reference. When the browser sees the character reference, it substitutes the proper character in that spot when the page is displayed.

There are two ways of referring to (escaping) a specific character:

Using a predefined abbreviated name for the character (called a named entity; see Note).
Note
HTML defines hundreds of named entities as part of the markup language, which is to say you can’t make up your own entity.

Using an assigned numeric value that corresponds to its position in a coded character set (numeric entity). Numeric values may be in decimal or hexadecimal format.

All character references begin with an & (ampersand) and end with a ; (semicolon).

An example should make this clear. I’d like to use a less-than symbol in my text, so I must use the named entity (<) or its numeric equivalent (<) where I want the symbol to appear (Figure 5-17):

<p>3 tsp. &lt; 3 Tsp.</p>

or:

<p>3 tsp. &#060; 3 Tsp.</p>

Figure 5-17. The special character is substituted for the character reference when the document is displayed in the browser.

When to Escape Characters

There are a few instances in which you may need or want to use a character reference.

HTML syntax characters

The <, >, &, ", and ' characters have special syntax meaning in HTML, and may be misinterpreted as code. Therefore, the W3C recommends that you escape <, >, and & characters in content. If attribute values contain single or double quotes, escaping the quote characters in the values is advised. Quote marks are fine in the content and do not need to be escaped. (See Table 5-2.)

Table 5-2. Syntax characters and their character references
Character	Description	Entity name	Decimal no.	Hexadecimal no.
<	Less-than symbol	<	<	<
>	Greater-than symbol	>	>	>
"	Quotation mark	"	"	"
'	Apostrophe	'	'	'
&	Ampersand	&	&	&

Invisible or ambiguous characters

Some characters have no graphic display and are difficult to see in the markup (Table 5-3). These include the non-breaking space ( ), which is used to ensure that a line doesn’t break between two words. So, for instance, if I mark up my name like this:

Jennifer&nbsp;Robbins

I can be sure that my first and last names will always stay together on a line. Another use for non-breaking spaces is to separate digits in a long number, such as 32 000 000.

Zero-width space can be placed in languages that do not use spaces between words to indicate where the line should break. A zero-width joiner is a non-printing space that causes neighboring characters to display in their connected forms (common in Arabic and Indic languages). Zero-width non-joiners prevent neighboring characters from joining to form ligatures or other connected forms.

Table 5-3. Invisible characters and their character references
Character	Description	Entity name	Decimal no.	Hexadecimal no.
(non-printing)	Non-breaking space
(non-printing)	En space	&ensp;
(non-printing)	Em space	&emsp;
(non-printing)	Zero-width space	(none)
(non-printing)	Zero-width non-joiner	&zwnj;	‌	‌
(non-printing)	Zero-width joiner	&zwj;	‍	‍

Input limitations

If your keyboard or editing software does not include the character you need (or if you simply can’t find it), you can use a character entity to make sure you get the character you want. The W3C doesn’t endorse this practice, so use the proper character in your source if you are able. Table 5-4 lists some special characters that may be less straightforward to type into the source.

Table 5-4. Special characters and their character references
Character	Description	Entity name	Decimal no.	Hexadecimal no.
‘	Left curly single quote	‘	‘	‘
’	Right curly single quote	’	’	’
“	Left curly double quote	“	“	“
”	Right curly double quote	”	”	”
...	Horizontal ellipsis	…	…	…
©	Copyright	©	©	©
®	Registered trademark	®	®	®
™	Trademark	™	™	…
£	Pound	£	£	£
¥	Yen	¥	¥	¥
€	Euro	€	€	€
–	En dash	–	–	–
—	Em dash	—	—	—

A complete list of HTML named entities and their Unicode code-points can be found as part of the HTML5 specification at www.w3.org/TR/html5/syntax.html#named-character-references. For a more user-friendly listing of named and numerical entities, I recommend this archived page at the Web Standards Project: www.webstandards.org/learn/reference/charts/entities.

Putting It All Together

So far, you’ve learned how to mark up elements, and you’ve met all of the HTML elements for adding structure and meaning to text content. Now it’s just a matter of practice. Exercise 5-3 gives you an opportunity to try out everything we’ve covered so far: document structure elements, grouping (block) elements, phrasing (inline) elements, sectioning elements, and character entities. Have fun!

Exercise 5-3. The Black Goose Bistro News page

Now that you’ve been introduced to all of the text elements, you can put them to work by marking up the News page for the Black Goose Bistro site. Get the starter text and finished markup files at learningwebdesign.com/5e/materials. Once you have the text, follow the instructions listed after it. The resulting page is shown in Figure 5-18.

Note

The “Low and Slow” paragraph is already marked up with the inline elements from Exercise 5-2).

The Black Goose Bistro News

Home

Menu

News

Contact

Summer Menu Items

posted by BGB, June 18, 2017

Our chef has been busy putting together the perfect menu for the summer months. Stop by to try these appetizers and main courses while the days are still long.

Appetizers

Black bean purses

Spicy black bean and a blend of Mexican cheeses wrapped in sheets of phyllo and baked until golden. $3.95

Southwestern napoleons with lump crab -- new item!

Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. $7.95

Main courses

Shrimp sate kebabs with peanut sauce

Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. $12.95

Jerk rotisserie chicken with fried plantains -- new item!

Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. $12.95

Low and Slow

posted by BGB, November 15, 2016

<p>This week I am <em>extremely</em> excited about a new cooking technique called <dfn><i>sous vide</i></dfn>. In <i>sous vide</i> cooking, you submerge the food (usually vacuum-sealed in plastic) into a water bath that is precisely set to the target temperature you want the food to be cooked to. In his book, <cite>Cooking for Geeks</cite>, Jeff Potter describes it as <q>ultra-low-temperature poaching.</q></p>

<p>Next month, we will be serving <b><i>Sous Vide</i> Salmon with Dill Hollandaise</b>. To reserve a seat at the chef table, contact us before <time datetime="20161130">November 30</time>.</p>

Location: Baker’s Corner, Seekonk, MA

Hours: Tuesday to Saturday, 11am to 11pm

All content copyright 2017, Black Goose Bistro and Jennifer Robbins

Start by adding the DOCTYPE declaration to tell browsers this is an HTML5 document.
Add all the document structure elements first (html, head, meta, title, and body). Give the document the title “The Black Goose Bistro News.”
The first thing we’ll do is identify the top-level heading and the list of links as the header for the document by wrapping them in a header element (don’t forget the closing tag). Within the header, the headline should be an h1 and the list of links should be an unordered list (ul). Don’t worry about making the list items links; we’ll get to linking in the next chapter. Give the list more meaning by identifying it as the primary navigation for the site (nav).
The News page has two posts titled “Summer Menu Items” and “Low and Slow.” Mark up each one as an article.
Now we’ll get the first article into shape. Let’s create a header for this article that contains the heading (h2 this time because we’ve moved down in the document hierarchy) and the publication information (p). Identify the publication date for the article with the time element, just as in Exercise 5-2.
The content after the header is a simple paragraph. However, the menu has some interesting things going on. It is divided into two conceptual sections (Appetizers and Main Courses), so mark those up as section elements. Be careful that the final closing section tag (</section>) appears before the closing article tag (</article>) so the elements are nested correctly and don’t overlap. Finally, let’s identify the sections with id attributes. Name the first one “appetizers” and the second “maincourses.”
With our sections in place, now we can mark up the content. We’re down to h3 for the headings in each section. Choose the most appropriate list elements to describe the menu item names and their descriptions. Mark up the lists and each item within the lists.
Now we can add a few fine details. Classify each price as “price” using span elements.
Two of the dishes are new items. Change the double hyphens to an em dash character and mark up “new item!” as “strongly important.” Classify the title of each new dish as “newitem” (use the existing dt element; there is no need to add a span this time). This allows us to target menu titles with the “newitem” class and style them differently than other menu items.
That takes care of the first article. The second article is already mostly marked up from the previous exercise, but you should mark up the header with the appropriate heading and publication date information.
So far, so good, right? Now make the remaining content that applies to the whole page a footer. Mark each line of content within the footer as a paragraph.
Let’s give the location and hours information some context by putting them in a div named “about.” Make the labels “Location” and “Hours” appear on a line by themselves by adding line breaks after them. Mark up the hours with the time element (you don’t need the date or time zone portions).
Finally, copyright information is typically “small print” on a document, so mark it up accordingly. As the final touch, add a copyright symbol after the word “copyright” using the keyboard or the © character entity.

Save the as bistro_news.html, and check your page in a modern browser. You can also upload it to validator.nu and make sure it is valid (it’s a great way to spot mistakes). How did you do?

Test Yourself

Were you paying attention? Here is a rapid-fire set of questions to find out. Find the answers in Appendix A.

Add the markup to insert a thematic break between these paragraphs:

	<p>People who know me know that I love to cook.</p>

	<p>I've created this site to share some of my favorite recipes.</p>

What’s the difference between a blockquote and a q element?
Which element displays whitespace exactly as it is typed into the source document?
What is the difference between a ul and an ol element?
How do you remove the bullets from an unordered list? (Be general, not specific.)
What element would you use to mark up “W3C” and provide its full name (World Wide Web Consortium)? Can you write out the complete markup?
What is the difference between dl and dt?
What is the difference between id and class?
What is the difference between an article and a section?

Element Review: Text Elements

The global attributes apply to all text elements. Additional attributes are listed under their respective elements.

Page sections
address	Author contact information
article	Self-contained content
aside	Tangential content (sidebar)
footer	Related content
header	Introductory content
nav	Primary navigation
section	Conceptually related group of content

Heading content
h1...h6	Headings, levels 1 through 6

Grouping content elements and attributes
blockquote	Blockquote
cite	The URL of the cited content
div	Generic division
figure	Related image or resource
figcaption	Text description of a figure
hr	Paragraph-level thematic break (horizontal rule)
main	Primary content area of page or app
p	Paragraph
pre	Preformatted text

List elements and attributes
dd	Definition
dl	Definition list
dt	Term
li	List item (for ul and ol)
value	Provides a number for an li in an ol
ol	Ordered list
reversed	Numbers the list in reverse order
start	Provides the starting number for the list
ul	Unordered list

Breaks
br	Line break
wbr	Word break

Phrasing elements and attributes
abbr	Abbreviation
b	Added visual attention (bold)
bdi	Bidirectional isolation
bdo	Bidirectional override
cite	Citation
code	Code sample
data	Machine-readable equivalent
del	Deleted text
cite	The URL of cited content.
datetime	Specifies the date and time of a change
dfn	Defining term
em	Stress emphasis
i	Alternate voice (italic)
ins	Inserted text
cite	The URL of cited content
datetime	Specifies the date and time of a change
kbd	Keyboard input
mark	Highlighted text
q	Short inline quotation
cite	The URL of the cited content
ruby	Section containing ruby text
rp	Parentheses in ruby text
rt	Ruby annotation
s	Strike-through; incorrect text
samp	Sample output
small	Annotation; “small print”
span	Generic phrase of text
strong	Strong importance
sub	Subscript
sup	Superscript
time	Machine-readable time data
datetime	Provides machine readable date/time
pubdate	Indicates the time refers to publication
u	Added attention (underline)

5

NOTE

No Naked Text!

Unordered Lists

Nesting Lists

Ordered Lists

Note

Changing Bullets and Numbering

Description Lists

Long Quotations

NOTE

Preformatted Text

NOTE

Figures

Browser SUPPORT note

Exercise 5-1. Marking up a recipe

HTML5 Support in Internet Explorer

Main Content

Headers and Footers

Headers

Note

Note

Footers

Note

Sections and Articles

NOTE

Aside (Sidebars)

Navigation

Addresses

Document Outlines

Text-Level (Inline) Elements

The Inline Elements Backstory

Obsolete HTML 4.01 Text Elements

Emphasized text

Important text

Elements originally named for their presentational properties

b

NOTE

i

s

u

small

Short quotations

Nesting Elements

Abbreviations and acronyms

NOTE

Citations

Defining terms

Program code elements

Subscript and superscript

Highlighted text

Dates and times

note

Note

Further Reading

Machine-readable information

Inserted and deleted text

Adding Breaks

Line breaks

Word breaks

Browser support note

Exercise 5-2. Identifying inline elements

Accommodating Non-Western Languages

Divide It Up with a div

MARKUP TIP

Define a Phrase with span

id and class Attributes

Identification with id

id and class Values

Classification with class

Markup TIP

Identify and Classify All Elements

Global Attributes

Structured Data in a Nutshell

Note

Roles

Note

States and Properties

SPEC TIP

For Further Reading