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."
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.
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.
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="http://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.
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="http://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.
Reading this book is fun, enjoable and worthwhile.