HTML and CSS Reference
In-Depth Information
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
You can download the code and resources for this lesson from the topic's web
page at .
Open your text editor.
From the Lesson_27 folder, open tpa.html .
Replace <div id=”header”> with <header> .
Replace </div> <!-- End header --> with </header> .
Replace <div id=”nav”> with <nav> .
Replace </div> <!-- End nav --> with </nav> .
77 7
Replace <div id=”mainContent”> with <section> .
Replace </div> <!-- End mainContent --> with </section> .
Place your cursor after the opening <section> tag and press Enter (Return).
Enter the following code:
Search WWH ::

Custom Search