Enhancing Web Page Structure - HTML5 - page 247

If you attempt to view the HTML5 tags in a browser that does not support them,
you'll run into presentation issues right away. Essentially, because the browser does
not recognize them, they're ignored and the content within them just reproduced
without any breaks. You can work around this problem with a simple CSS rule:

section, header, nav, article, aside, footer, time {
display: block;
}
This rule makes sure that all the HTML5 semantic tags act like other block-level
elements such as <p> and <div> tags. You can, of course, add any other styling
you'd like to the grouped selectors or any individual HTML5 tag.

Try iT

In this Try It you learn how to convert a page to use HTML5 semantic-based tags.

Lesson requirements

You will need the tpa.html file from the Lesson_27 folder, as well as a text editor and a web
browser.

You can download the code and resources for this lesson from the topic's web
page at www.wrox.com .

step-by-step
1.

Open your text editor.

2.

From the Lesson_27 folder, open tpa.html .

3.

Replace <div id=”header”> with <header> .

4.

Replace </div> <!-- End header --> with </header> .

5.

Replace <div id=”nav”> with <nav> .

6.

Replace </div> <!-- End nav --> with </nav> .

77 7

Replace <div id=”mainContent”> with <section> .

8.

Replace </div> <!-- End mainContent --> with </section> .

9.

Place your cursor after the opening <section> tag and press Enter (Return).

10.

Enter the following code:

<hgroup>