As web developers began using floating layout techniques, they almost always created divs called nav, header, and footer. The developers of HTML5 decided to create new elements with these names. Take a look at the following code to see the semantic tags in action.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>semantic</title>
<meta charset="UTF-8">
<style type = "text/css">
header {
border-bottom: 5px double black;
}
nav {
float: left;
width: 20%;
clear: left;
min-height: 400px;
border-right: 1px solid black;
}
section {
float: left;
width: 75%;
padding-left: 1em;
}
article {
float: left;
width: 75%;
padding-left: 1em;
}
footer {
clear: both;
border-top: 5px double black;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>This is my header</h1>
</header>
<nav>
<h2 id="tab1" >Navigation</h2>
<ul>
<li><a href="#">link a</a></li>
<li><a href="#">link b</a></li>
<li><a href="#">link c</a></li>
<li><a href="#">link d</a></li>
<li><a href="#">link e</a></li>
</ul>
</nav>
<section id = "1">
<h2 id="tab2" >Section 1</h2>
<p>Section body...</p>
</section>
<section id = "2">
<h2 id="tab3" >Section 2</h2>
<p>Section body...</p>
</section>
<article>
<h2 id="tab4" >Article</h2>
<p>Article body...</p>
</article>
<footer>
<h2 id="tab5" >Footer</h2>
<address>
Andy Harris <br />
<a href = "mailto:[email protected]">
[email protected]</a>
</address>
</footer>
</body>
</html>
As you can see, there are a number of new semantic markup tags in HTML5:
header: This is not the same as the h1-h6 tags. It denotes a chunk of the page that will contain a header for the page. Often the header will fill up the page width, and will have some sort of banner image. It frequently contains h1 content.
nav: This tag indicates some kind of navigation section. It has no particular style of its own, but it is frequently used as either a horizontal or vertical menu for site navigation.
section: A section is used to specify a generic part of the page. You can have multiple sections on the same page.
article: An article is like a section, but it's intended for use with external resources. Many pages are built automatically by software, and when these pages integrate content from other sources, it's intended to use the article tag to integrate this content.
footer: A footer is intended to display footer contents at the bottom of a page. Typically a footer covers the bottom of a page, although this is not the default behavior.
Note that none of these elements have any specific formatting. It's up to you to provide formatting through CSS code. Each of the elements can be formatted directly as an HTML element (because that's what it is). All latest-version browsers support the semantic markup tags, but if you want to support older browsers (especially IE before version 8), you'll still need to use divs.