206 CHAPTER 5 More HTML5
After this lesson, you will be able to:
■■Create a semantic layout.
■■Create an HTML5 document.
■■Annotate content.
■■Display various forms of semantic content.Estimated lesson time: 30 minutesWhy semantic markup?
One of the problems with using <div> and <span> elements is that they have little meaning
other than “I need to do something with this content.” For <div> elements, you typically need
to position the content on the page. For <span> elements, you need to apply special format-
ting to the content.
You might be wondering what kind of meaning the <div> and <span> elements can
provide. For <div> elements, it might be better to have an element that represents the page
header and can be positioned. You might want a different element that represents the page
footer and can be positioned.
Are your users reading your HTML source? If the <div> element is the all-purpose tool to
position elements, why use these new semantic elements?
These are good questions and thoughts. In fact, if you search the web for semantic
markup, you’ll see plenty of discussions, some quite heated, about this topic.
Developers have been using <div> elements for page layout, and the developer usually
provides the meaning of each <div> element based on its id or CSS class. The W3C analyzed
thousands of webpages and found the most common id and class names. Rather than start
over, the W3C made these names into new elements. Obvious examples are the <header>
and <footer> elements.Browser support for HTML5
Your users typically don’t read your HTML source when they browse to your website, but
many machines are reading your HTML source with the goal of interpreting your webpage.
Web crawlers are constantly surfing the Internet, reading webpages and building indexed
searchable content that can be used to find your website. Many people have Nonvisual
Desktop Access (NVDA) devices, which provide an alternate means of viewing, reading, and
processing webpages. Some NVDA devices implement voice synthesis to read webpages to
visually impaired people; others provide a Braille-like interface so the user can read your web-
pages by touch, as shown in Figure 5-1.