- Using HTML5
- Clean Code
- Don't Forget Semantic Elements
- Validating Your HTML
- Summary
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Don’t Forget Semantic Elements
Semantic elements are elements that describe the content. They provide more information to the browser without requiring any extra attributes.
Standard Semantic HTML Elements
A number of semantic HTML elements have been in use for years—in some cases since HTML level 1. Here are some semantic HTML elements that are valid in HTML5 and earlier versions of HTML:
- <abbr> defines abbreviations and acronyms
- <cite> defines citations, such as for quotations
- <code> defines a code reference
- <q> defines a short, inline quotation
There are many more semantic elements in HTML, and you can learn about them in my article “What Semantics Means in HTML and Why You Should Care” (see http://www.html5in24hours.com/2014/09/what-is-semantic-html/).
New HTML5 Semantic Elements
HTML5 adds a lot of new elements that you can use to mark up your content semantically. The most useful ones are the sectioning elements:
- <article>
- <aside>
- <nav>
- <section>
These elements define areas of the content that are commonly found on web pages. Most web pages have a main article that defines the page (<article>); there is usually sidebar information for either the article, the page, or the entire site (<aside>); navigation is critical (<nav>); and many web pages are divided into separate sections with different semantic meanings that don’t fall into the other categories (<section>).
There are also two new elements that are not technically sectioning elements. However, they are semantic and help divide a page:
- <header>
- <footer>
You can add a header or footer to any of the sectioning elements listed above, you can add them to an entire page, or you can add them to both. Listings 5.5 and 5.6 show you how a page written in HTML 4.01 with <div> tags as the divisions can be adjusted to use HTML5 and sectioning elements.
LISTING 5.5 An HTML 4.01 Page to Be Converted to HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
<title>Dandylions</title>
</head>
<body>
<div id="main">
<h1>Dandylions</h1>
<div id="article">
<h2>Not Your Mother's Weed</h2>
<p><span class="pronounce"><strong><em>Taraxacum</em></strong>
<em>/t
'rækskum/</em></span> is a large genus of flowering plants
in the family Asteraceae. They are native to Eurasia and North and
South America, and two species, T. officinale and T.
erythrospermum, are found as weeds worldwide. Both species are
edible in their entirety. The common name
<span class="pronounce"><strong>dandelion</strong>
<em>/'dændila |.n/</em></span> (dan-di-ly-n, from French
dent-de-lion, meaning "lion's tooth") is given to members of the
genus, and like other members of the Asteraceae family, they have
very small flowers collected together into a composite flower head.
Each single flower in a head is called a floret. Many
<em>Taraxacum</em> species produce seeds asexually by apomixis,
where the seeds are produced without pollination, resulting in
offspring that are genetically identical to the parent plant.</p>
</div>
<div id="sidebar">
<img src="images/dandy.jpg" width="400" height="300" alt=""/>
</div>
<div id="footer">
<p>Text from
<a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
</div>
</div>
</body>
</html>
The HTML in Listing 5.5 has a headline, a main article with a subhead titling it, a sidebar, and a footer. All these are defined in <div> elements. Listing 5.6 has these same elements, but it also uses HTML5 sectioning elements to define the sections semantically.
LISTING 5.6 The Converted HTML5 Document
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dandylions</title>
</head>
<body>
<div id="main">
<header>
<h1>Dandylions</h1>
</header>
<article>
<h2>Not Your Mother's Weed</h2>
<p><span class="pronounce"><strong><em>Taraxacum</em></strong>
<em>/t'rækskum/</em></span> is a large genus of flowering plants
in the family Asteraceae. They are native to Eurasia and North and
South America, and two species, T. officinale and T.
erythrospermum, are found as weeds worldwide. Both species are
edible in their entirety. The common name
<span class="pronounce"><strong>dandelion</strong>
<em>/'dændila |.n/</em></span> (dan-di-ly-n, from French
dent-de-lion, meaning "lion's tooth") is given to members of the
genus, and like other members of the Asteraceae family, they have
very small flowers collected together into a composite flower head.
Each single flower in a head is called a floret. Many
<em>Taraxacum</em> species produce seeds asexually by apomixis,
where the seeds are produced without pollination, resulting in
offspring that are genetically identical to the parent plant.</p>
</article>
<aside>
<img src="images/dandy.jpg" width="400" height="300" alt=""/>
</aside>
<footer>
<p>Text from
<a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
</footer>
</div>
</body>
</html>
Notice that <div id="main"> is in both documents. This gives you a hook for styles and scripts on the entire web page.
Considering Microformats
When you’re adding semantics into your web pages, you should consider using microformats to add even more meaning, when appropriate. Microformats use human-readable text inside the HTML (usually in the class attribute of an element) to define the contents.
These are some commonly used microformats:
- hCalendar marks up events for putting in a calendar.
- hCard marks up contact information for address books.
- hRecipe marks up recipes for making food.
- hReview marks up reviews of books, movies, and more.
Microformats add semantic information about the elements, and this information is already being used in certain situations. Figure 5.2 shows a Google search for reviews of the movie Ender’s Game. The second and third results show “rich snippets,” including information like the star rating.
)
FIGURE 5.2 The second and third results from a Google search for Ender’s Game reviews.
Google and Bing are both using these types of rich snippets to enhance their search results, and most of the data they are using to get it is semantically marked-up HTML using microformats. You can learn more about how to use microformats in my book Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours.
By writing semantic HTML, you give more information to user agents to use to display the information correctly. For example, if a screen reader sees the <article> element, it knows that this is the main point of the page, and it will read it aloud before reading anything in an <aside> element. Plus, as web pages get more and more sophisticated, what the user agents do with them gains sophistication. For instance, in the future, your semantically marked-up recipe could tell a web-ready refrigerator what time to alert the robot butler to start the roast.