New book: HTML5 Step by Step
We’re excited to announce that Faithe Wempen's new book HTML5 Step by Step (ISBN 9780735645264; 416 pages) is available.
This edition builds on her previous HTML book, extending the coverage into the newest HTML version, HTML5. Not only does this new version describe the new tags and capabilities, it walks you through the entire process to build HTML5-based web pages step by step. In fact, it goes beyond HTML5, digging into audio, video, and drawing in the browser with JavaScript so you can take full advantage of the new <canvas>, <audio>, and <video> tags without resorting to plug-ins.
Here's an excerpt from Chapter 11, "Understanding HTML5 Semantic Tags."
Understanding HTML5 Semantic Tags
HTML5 adds some semantic tags to define layouts in more intuitive ways than the
generic <div> tag is capable of. A semantic tag is one in which the name of a tag reflects
its purpose.
Here are the major semantic tags you should know:
● <header> Defines the masthead or other header information on the page. Typically
the header is repeated on every page of a site, although that is not required.
● <footer> Defines the text at the bottom of a page, such as the copyright or contact
information. Again, it is typically repeated on every page of the site.
● <article> Defines a block of text that represents a single article, story, or message.
An article can be distinguished from other text in that it can logically stand
alone. For example, on a news site, each news story is an article.
● <aside> Defines a block of text that is tangential to the main discussion, such as
a note, tip, or caution. An aside can be distinguished from other text in that it could
be pulled out and discarded without disrupting the main document in which it
appears.
● <section> Defines a generic content or application section. Examples of sections
would be book chapters or the numbered sections of a thesis; a site’s home page
could be split into sections such as Introduction, News, and Contact Information. A
section begins with a heading such as <h1> followed by other content. A general
rule is to use <section> if the area being defined would be included in an outline of
the document or page.
Note The <section> tag might sound similar to the <div> tag, but the HTML5 standard
differentiates them, saying that <section> should not be used merely to define formatting. A
section defines a particular type of meaningful content, not just a block of contiguous text that
should be formatted the same way.
If you use semantic tags to structure your page and someone views it with a browser that
doesn’t support HTML5, the page might not look the way you want it to; the browser will
ignore the tags it doesn’t understand. That’s why, for the time being, creating the page
structure using <div> tags is the safest way to go. However, it’s important that you learn
the HTML5 semantic tags too, for future reference.
In this chapter, you’ll learn to mark up a document both ways: with generic <div> tags
that are readable in any browser, and with the new HTML5 semantic tags.
Beginning to Think in Divisions
In an effective division-based layout, each part of the page you want to format separately
should be a division. For now, don’t think about whether the division will be a
vertical or horizontal area on the page, or how large or small it will be; just think about
the content. For example, look at the following Web page. How many natural divisions
do you see here?
If you were designing with <div> tags, you might break down this page like this: the
masthead, the top navigation bar, the body text, the bottom navigation bar, and
the copyright notice.
If you were designing with HTML5 semantic tags, you might break it down like this:
<header> for the masthead, <nav> for the navigation bars, and <footer> for the
copyright notice. Formatting each of the paragraphs in the body with its own <article>
tag might be overkill for this page, but in a page with more content, you might use
<article>, <aside>, or <section> to break content down into manageable pieces.
Creating Divisions
You use an id attribute to give a name to a division, like this:
<div id="masthead">
Each ID must be unique within the document, but multiple documents can use the same
division names. Such reuse is good, in fact, because it lets you define the formatting of
multiple documents with a single style sheet.
In this exercise, you will create divisions within a page. Then in later exercises, you will
position and format those divisions.
SET UP Use the index.htm file in the practice file folder for this topic. This file is
located in the Documents\Microsoft Press\HTML 5 SBS\11Divisions\CreatingDivisions
folder. Open the index file in Microsoft Notepad and Microsoft Internet Explorer.
1. Enclose the logo, company name, and tagline in a <div> tag, and name the tag
masthead.
<body>
<div id="masthead">
<a href="https://www.contoso.com" title="Home page">
<img src="images/leaf.gif class="logo""></a>
<h1 class="pagetitle">The Garden Company</h1>
<h5 class="tagline"><i>Helping you help your gardens grow since 1975</i></
h5>
</div>
2. Enclose the top navigation bar in a <div> tag, and name the tag topnav.
<div id="topnav">
<hr>
<a href="index.htm"><img src="images/btn_home.gif"
style='border:none'></a>
<a href="tips.htm"><img src="images/btn_tips.gif" style='border:none'></a>
<a href="problems.htm"><img src="images/btn_problem.gif"
style='border:none'></a>
<a href="products.htm"><img src="images/btn_products.gif"
style='border:none'></a>
<a href="about.htm"><img src="images/btn_about.gif"
style='border:none'></a>
<a href="contact.htm"><img src="images/btn_contact.gif"
style='border:none'></a>
<hr>
</div>
Note Make sure that you include the <hr> tags in the topnav division.
Note As you learned in Chapter 10, “Creating Navigational Aids,” the <nav> tag is an
HTML5 semantic tag that serves the same purpose as defining a <div> tag, but it is
intended for a navigation bar. You’ll use <nav> in the next exercise in the chapter, where
you apply HTML5 semantic tags.
3. Enclose the body paragraphs in a <div> tag, and name the tag main.
<div id="main">
<p><b>Fruit trees are now in stock! </b>We have just received a large
shipment of peach, pear, apple, and plum trees with sturdy root systems
and healthy foliage, with prices as low as $29.99. Visit the <a href=
"products.htm">Products</a> page for details.</p>
<p><b>New articles!</b> Check out these recently posted articles:
<ul>
<li><a href="foliage.htm">Diagnosing Foliage Problems</a></li>
<li><a href="spray.htm">Spraying Techniques for Fruit Trees</a></li>
</ul>
<p><b>What does <i>that</i> mean?</b> Run into an unfamiliar gardening term?
Look it up in our <a href="glossary.htm" target="_blank">Glossary</a>.</p>
</div>
4. Enclose the bottom navigation bar in a <div> tag, and name the tag bottomnav.
<div id="bottomnav">
<hr>
<p style='margin:0px; text-align: center'>
<a href="index.htm">Home</a>
<a href="tips.htm">Tips and Tricks</a>
<a href="problems.htm">Problem-Solving</a>
<a href="products.htm">Products</a>
<a href="about.htm">About Our Store</a>
<a href="contact.htm">Contact Us</a></p>
<hr>
</div>
5. Enclose the copyright notice in a <div> tag, and name the tag copy.
<div id="copy">
<p>Copyright © 2012 The Garden Company™<br>
No material may be reproduced without written permission<br>
<a href="mailto:webmaster@contoso.com?subject=Question/Comment" title=
"webmaster@contoso.com">Contact the Webmaster</a></p>
</div>
6. Save the file.
Note You do not need to view your work in Internet Explorer this time because you have
not made any changes that change the rendering or appearance of the page. You will do
that later in the chapter.
CLEAN UP Close the Notepad and Internet Explorer windows.
Creating an HTML5 Semantic Layout
If you prefer to use the HTML5 semantic tags to create your layout, you choose the
appropriate tags based on the purpose of the text. It’s conceptually very much the same
as using a <div> tag with an id attribute, but the tag itself provides the context. For
example, instead of the <div id=”masthead> tag you would use the <header> tag.
In this exercise, you will change a division-based document to one that uses semantic
tags to define the layout.
SET UP Use the index2.htm file in the practice file folder for this topic. This file is
located in the Documents\Microsoft Press\HTML 5 SBS\11Divisions\UsingSemantic
folder. Open the index2 file in Microsoft Notepad and Microsoft Internet Explorer.
1. Replace the <div id=”masthead”> tag with <header>, and change its closing
</div> tag to </header>.
<body>
<header>
<a href="https://www.contoso.com" title="Home page">
<img src="images/leaf.gif class="logo""></a>
<h1 class="pagetitle">The Garden Company</h1>
<h5 class="tagline"><i>Helping you help your gardens grow since
1975</i></h5>
</header>
2. Replace the <div id=”topnav”> tag with <nav>, and change its closing </div> tag
to </nav>.
<nav>
<hr>
<a href="index.htm"><img src="images/btn_home.gif"
style='border:none'></a>
<a href="tips.htm"><img src="images/btn_tips.gif" style='border:none'></a>
<a href="problems.htm"><img src="images/btn_problem.gif"
style='border:none'></a>
<a href="products.htm"><img src="images/btn_products.gif"
style='border:none'></a>
<a href="about.htm"><img src="images/btn_about.gif"
style='border:none'></a>
<a href="contact.htm"><img src="images/btn_contact.gif"
style='border:none'></a>
<hr>
</nav>
Note Because the bottom navigation bar should be formatted differently than the top
one, leave it formatted as a division. That way you can use the <nav> tag to define the
formatting for only the top navigation bar.
3. Delete the <div id=”main”> tag and its closing </div> tag.
4. Enclose the first paragraph of the body text with an <article> tag.
<article>
<p><b>Fruit trees are now in stock! </b>We have just received a large
shipment of peach, pear, apple, and plum trees with sturdy root systems
and healthy foliage, with prices as low as $29.99. Visit the <a href=
"products.htm">Products</a> page for details.</p>
</article>
Note In practical usage, the individual paragraphs of body text on this page would
probably not warrant their own semantic tags because this page contains so little content
overall. However, for example purposes, you will mark them up anyway.
5. Enclose the second paragraph and the bulleted list that follows it with an
<article> tag.
<article>
<p><b>New articles!</b> Check out these recently posted articles:
<ul>
<li><a href="foliage.htm">Diagnosing Foliage Problems</a></li>
<li><a href="spray.htm">Spraying Techniques for Fruit Trees</a></li>
</ul></article>
6. Enclose the last body paragraph with an <aside> tag.
<aside>
<p><b>What does <i>that</i> mean?</b> Run into an unfamiliar gardening term?
Look it up in our <a href="glossary.htm" target="_blank">Glossary</a>.</p>
</aside>
Leave the bottom navigation bar’s <div> tag as is.
7. Replace the <div id=”copy”> tag with <footer>, and change its closing </div> tag
to </footer>.
<footer>
<p>Copyright © 2012 The Garden Company™<br>
No material may be reproduced without written permission<br>
<a href="mailto:webmaster@contoso.com?subject=Question/Comment" title=
"webmaster@contoso.com">Contact the Webmaster</a></p>
</footer>
8. Save the file.
Note You do not need to view your work in Internet Explorer this time because the
changes you have made do not change the rendering.
CLEAN UP Close the Notepad and Internet Explorer windows.