66 Part I: Core Markup

Removed Element Reasoning Alternatives

acronym Misunderstood by many Web Use the abbr element.
developers.
applet Obsolete syntax for Java applets. Use the object element.
dir Rarely used, and provides similar Use the ul element.
functionality to unordered lists.
frame Usability concerns. Use fixed-position elements with
CSS and/or object elements with
sourced documents.
frameset Usability concerns. Use fixed-position elements with
CSS and/or object elements with
sourced documents.
isindex Archaic and can be simulated Use the input element to create
with typical form elements. text field and button and back up with
appropriate server-side script.
noframes Since frames are no longer N/A
supported, this contingency
element is no longer required.

TABLE 2-4 Elements Removed by HTML5

like <font> and proprietary tags like <spacer>, <marquee>, and <blink> should be off limits
is somewhat redundant and does not build on the specifications. However, the reference in
Chapter 3 covers compliance points completely, so when in doubt check the appropriate
element’s entry.

In with the New Elements

For most Web page authors, the inclusion of new elements is the most interesting aspect of
HTML5. Some of these elements are not yet supported, but already many browsers are
implementing a few of the more interesting ones, such as audio and video, and others can
easily be simulated even if they are not directly understood yet, as you will see later in the
chapter. Table 2-5 summarizes the elements added by HTML5 at the time of this edition’s
writing, and the sections that follow illustrate their use. Again, Chapter 3 provides
a complete element syntax discussion.

Sample of New Attributes for HTML5

One quite important aspect of HTML5 is the introduction of new attributes. There are quite
a few attributes that are global and thus found on all elements. Table 2-6 provides a brief
overview of these attributes. We’ll take a look at many of these in upcoming sections and
a complete reference for all is found in the next chapter.
The element reference in Chapter 3 provides the full syntax for the various HTML5
attributes that may have been added to specific elements. Some of them, such as reversed
for use on ordered lists (<ol>), are a long time in coming, while others simply add polish, or
address details that few page authors may notice.
 Chapter 2: Introducing HTML5 67

New Element Description

article Encloses a subset of a document that forms an independent part of a document,

PART I
such as a blog post, article, or self-continued unit of information.
aside Encloses content that is tangentially related to the other content in an enclosing
element such as section.
audio Specifies sound to be used in a Web page.
canvas Defines a region to be used for bitmap drawing using JavaScript.
command Located within a menu element, defines a command that a user may invoke.
datalist Indicates the data items that may be used as quick choices in an input element of
type="list".
details Defines additional content that can be shown on demand.
figure Defines a group of content that should be used as a figure and may be labeled by a
legend element.
footer Represents the footer of a section or the document and likely contains
supplementary information about the related content.
header Represents the header of a section or the document and contains a label or other
heading information for the related content.
hgroup Groups heading elements (h1–h6) for sectioning or subheading purposes.
mark Indicates marked text and should be used in a similar fashion to show how a
highlighter is used on printed text.
meter Represents a scalar measurement in a known range similar to what may be
represented by a gauge.
nav Encloses a group of links to serve as document or site navigation.
output Defines a region that will be used to hold output from some calculation or form
activity.
progress Indicates the progress of a task toward completion, such as displayed in a progress
meter or loading bar.
rp Defines parentheses around ruby text defined by an rt element.
rt Defines text used as annotations or pronunciation guides. This element will be
enclosed within a ruby element.
ruby This is the primary element and may include rt and rp elements. A ruby element
serves as a reading or pronunciation guide. It is commonly used in Asian languages,
such as in Japanese to present information about Kanji characters.
section Defines a generic section of a document and may contain its own header and
footer.
source Represents media resources for use by audio and video elements.
time Encloses content that represents a date and/or time.
video Includes a video (and potentially associated controls) in a Web page.

TABLE 2-5 Elements Added by HTML5

68 Part I: Core Markup

New Attribute Description

accesskey Defines the accelerator key to be used for keyboard access to an element.
contenteditable When set to true, the browser should allow the user to edit the content of
the element. Does not specify how the changed content is saved.
contextmenu Defines the DOM id of the menu element to serve as a context menu for
the element the attribute is defined on.
data-X Specifies user-defined metadata that may be put on tags without concern of
collision with current or future attributes. Use of this type of attribute avoids
the common method of creating custom attributes or overloading the class
attribute.
draggable When specified, should allow the element and its content to be dragged.
hidden Under HTML5, all elements may have hidden attribute which when placed
indicates the element is not relevant and should not be rendered. This
attribute is similar to the idea of using the CSS display property set to a
value of none.
itemid Sets a global identifier for a microdata item. This is an optional attribute, but
if it is used, it must be placed in an element that sets both the itemscope
and itemtype attributes. The value must be in the form of a URL.
itemprop Adds a name/value pair to an item of microdata. Any child of a tag with an
itemscope attribute can have an itemprop attribute set in order to add a
property to that item.
itemref Specifies a list of space-separated elements to traverse in order to find
additional name/value pairs for a microdata item. By default, an item
only searches the children of the element that contains the itemscope
attribute. However, sometimes it does not make sense to have a single
parent item if the data is intermingled. In this case, the itemref attribute
can be set to indicate additional elements to search. The attribute is
optional, but if it is used, it must be placed in an element that sets the
itemscope attribute.
itemscope Sets an element as an item of microdata (see “Microdata” later in the
chapter).
itemtype Defines a global type for a microdata item. This is an optional attribute,
but if it is used, it must be placed in an element that sets the itemscope
attribute. The value must be in the form of a URL.
spellcheck Enables the spell checking of an element. The need for this attribute globally
may not be clear until you consider that all elements may be editable at
page view time with the contenteditable attribute.
tabindex Defines the element-traversal order when the keyboard is used for navigation.

TABLE 2-6 Key Attributes Added by HTML5

 Chapter 2: Introducing HTML5 69

HTML5 Document Structure Changes

As you have seen, the HTML5 document structure seems pretty much the same as in HTML

PART I
4 save a slightly different <!DOCTYPE> statement. However, if you look closer, there are a
few important differences in HTML5 that show the document structure has in fact been
expanded quite a bit.
HTML5 documents may contain a header element, which is used to set the header
section of a document and thus often contains the standard h1 to h6 heading elements:

<header>
<h1>Welcome to the Future World of HTML5.</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>

Similarly, a footer element is provided for document authors to define the footer
content of a document, which often contains navigation, legal, and contact information:

<footer>
<p>Content of this example is not under copyright</p>
</footer>

The actual content to be placed in a <footer> tag is, of course, up to you and may be
enclosed in div, p, or other block elements, as illustrated by this simple example:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 header and footer example</title>
</head>
<body>
<header>
<h1>Welcome to the Future World of HTML5.</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
<p>Some body content here.</p>
<p>Some more body content here.</p>

<footer>
<p>Content of this example is not under copyright.</p>
</footer>
</body>
</html>

O NLINE http://htmlref.com/ch2/headerfooter.html
The HTML5 structural element with the most possible uses is the section element. A
particular <section> tag can be used to group arbitrary content together and may contain
further <section> tags to create the idea of subsections. Traditionally, we are familiar with
sections; just as this book is broken into chapters and various main and secondary sections,
70 Part I: Core Markup

so too could a Web document be structured in this way. The example here illustrates the
basic use of HTML5 sections:

<section>
<h1>Chapter 2</h1>
<p>New HTML5 elements.</p>
<section>
<h2>HTML5's section Element</h2>
<p>These elements are useful to create outlines.</p>
<section>
<h3>Nest Away!</h3>
<p>Nest your sections but as you nest you might want to indent.</p>
</section>
</section>
<p>Ok that's enough of that.</p>
</section>

O NLINE http://htmlref.com/ch2/section.html
It may not be obvious but a section element may contain header and footer elements
of its own:

<section>
<header>
<h1>I am Section Heading</h1>
</header>
<h2>I am outside the section header I'm just a plain headline.</h2>
<p>Some more section content might go here.</p>
<footer>
<p>Hi from the footer of this section.</p>
</footer>
</section>

HTML5 uses headings and newly introduced elements like the section element for
outlining purposes. For example, the expanded example here shows a number of sections
with headers, footers, headlines, and content:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 expanded section example</title>
</head>
<body>
<header>
<h1>Welcome to the Future World of HTML5</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
 Chapter 2: Introducing HTML5 71

<!-- assume chapter 1 before -->

<section id="chapter2">
<header>
<h1>Chapter 2</h1>

PART I
</header>

<p>Intro to chapter 2 here...</p>

<section id="newStrucreElements">
<header>
<h2>New Structural Elements</h2>
</header>
<h3>header Element</h3>
<p>Discussion of header element.</p>

<h3>footer Element</h3>
<p>Discussion of footer element.</p>

<h3>section Element</h3>
<p>Discussion of section element</p>
</section>

<section id="newFormElements">
<header>
<h2>New Form Elements</h2>
</header>
<h3>input type=date</h3>
<p>Discussion here...</p>
<footer>
<p>These ideas are from WebForms specification.</p>
</footer>
</section>
</section>

<section id="chapter3">
<header>
<h2>Chapter 3</h2>
</header>
<p>Massive element reference...</p>
</section>
<footer>
<p>Content of this example is not under copyright</p>
</footer>

</body>
</html>

O NLINE http://htmlref.com/ch2/sectionoutline.html
72 Part I: Core Markup

HTML5–compliant browsers should take this markup and define an outline based upon
the use of headers, like so:

In theory, user agents could take the outlining semantics and derive meaning or even
provide an alternative browser interface, although that is quite speculative at this point. It is
clear, however, that if you introduce such outlining ideas, issues may arise. For example, the
first header really was not two levels of sectioning but simply one with a subhead. To
address this outlining, you would take this markup

<header>
<h1>Welcome to the Future World of HTML5</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>

and then join the subhead to the headline with an hgroup element like so:

<header>
<hgroup>
<h1>Welcome to the Future World of HTML5</h1>
<h2>Don't be scared it isn't that hard!</h2>
</hgroup>
</header>

No hgroup hgroup
elements used elements used
 Chapter 2: Introducing HTML5 73

A complete example to explore can be found online, though you may find that a browser
does not do anything of interest and that you need an outline simulator to see the difference
between using <hgroup> tags or not.

PART I
O NLINE http://htmlref.com/ch2/hgroup.html
Given these semantics, it is clear that HTML5 sectioning elements are not just a
formalization of <div> tags with appropriate class values. For example, you might
consider

<div class="header">
<!-- header here -->
</div>
<div class="section">
<div class="header">
<h2>Section Heading</h2>
</div>
<p>Content of section.</p>
</div>
<div class="footer">
<!-- footer here -->
</div>

to be roughly the same as the previously introduced elements. To some degree this is true,
but clearly the names of the class values aren’t defined by a standard nor is any outlining
algorithm defined.
Beyond sectioning, HTML5 introduces a number of other structural elements. For
example, the article element is used to define a discrete unit of content such as a blog
post, comment, article, and so on. For example, the following defines a few individual blog
posts in a document:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 article example</title>
</head>
<body>

<header>
<hgroup>
<h1>Welcome to the Future World of HTML5 Blog</h1>
<h2>Don't be scared it isn't that hard!</h2>
</hgroup>
</header>
<section id="articleList">
<h2>Latest Posts</h2>

<article id="article3">
<h2>HTML5 Here Today!</h2>
<p>Article content here...</p>
</article>
74 Part I: Core Markup

<article id="article2">
<h2>HTML5 Widely Misunderstood</h2>
<p>Article content here...</p>
</article>

<article id="article1">
<h2>Discovering the article element</h2>
<p>Article content here...</p>
</article>
</section>

<footer>
<p>This fake blog example is not real.</p>
</footer>

</body>
</html>

O NLINE http://htmlref.com/ch2/article.html
The idea of defining these discrete content units specially is that you might wish to
extract them automatically, so again, having defined elements as opposed to some ad hoc
use of class names on <div> tags is preferred.

NOTE Under early HTML5 drafts, the article element provided for cite and pubdate
attributes, which may make the usage of the content more meaningful by outside sites; however,
these were later dropped and use of <time> tags was encouraged.

HTML5 also introduces an aside element, which may be used within content to
represent material that is tangential or, as the element name suggests, an aside:

<p>Here we explore the various HTML5 elements. I would write

some real content here but you are busy reading the book anyway.
</p>

<aside>
<h2>Pointless Aside</h2>
<p>Oh by the way did you know that the author lives in San Diego?
It is completely irrelevant to the discussion but he seems
to like the weather there as opposed to rainy New Zealand.</p>
</aside>

<p>So as we continue to discuss the various HTML5 elements we must

remember to stay focused as there is much to learn.
</p>

O NLINE http://htmlref.com/ch2/aside.html
 Chapter 2: Introducing HTML5 75

You may have noted that an <h2> tag was used in the aside. While not required, it is
useful as a reminder to readers that aside elements serve as outline sectioning elements, as
shown here:

PART I
NOTE If a heading is not provided in an aside, you may see an outline mechanism add “Untitled
Section” or potentially even make up one based upon the start of the element content.

Adding Semantics
Many of the elements that HTML5 adds that can be used right away are semantic in nature.
In this sense, HTML5 continues the appropriate goal of separating structure from style. In
this section, you will see a number of repurposed elements as well as some that are all new.
At first you won’t see much value in using them other than to add semantics, but toward
the end of the chapter we will explore how to make the elements understandable to most
modern browsers and how to apply some simple styling for end users.

Marking Text
The new HTML5 element mark was introduced for highlighting content similarly to how
a highlighter pen might be used on important text in a book. The following example wraps
a few important words:
<p>Here comes <mark>marked text</mark> was it obvious?</p>

Unfortunately, you won’t necessarily see anything with such an example:

You would need to apply a style. Here, inline styles are used just to show the idea:
<p>The new HTML5 specification is in the works. While <mark
style="background-color: red;">many features are not currently
implemented or even well defined</mark> yet, <mark
style="background-color: green;">progress is being made</mark>.
Stay tuned to see more new HTML elements added to your Web documents
in the years to come.</p>

O NLINE http://htmlref.com/ch2/mark.html