Understanding semantic elements
HTML5 markup is more semantic than its predecessors due to the new semantic elements for describing the structure of the page content. The list of semantic elements includes the following:
The
<header>tag defines a header for the document or section. It wraps the heading or a group of headings in a page or a section, and it can also contain information such as logos, banners, and main navigation links. You can have multiple<header>tags in a page.The
<nav>tag represents the major navigation links. Typically it is bound to the header.The
<section>tag wraps related content that can be grouped thematically. A<section>tag can include a<header>and<footer>tag.The
<footer>tag represents content about a page or a section, for example, related links, privacy terms, and copyright information. You can have more than one<footer>in a page, and it is same as the<header>tag.The
<article>tag represents self-contained content that can be used independent of the document as a whole, for example, a blog entry.<article>and<section>are much alike because both are standalone tags and hold related content; however, if it's content can be syndicated (via an atom or an RSS feed), then the<article>element is more appropriate.The
<aside>tag represents the part of a page that is tangentially related to the content around it, and also separate from that content, as it can be removed without affecting the main content of the page. Typical usage can be a sidebar.The
<address>tag represents the contact information for the nearest<article>parent element, if present, or the parent<body>element, which in that case applies to the whole document.
Putting all these new elements together in a page would yield the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Developing for Windows 8</title>
</head>
<body>
<header>
<a href="default.html">
<h1>The Courses</h1>
<img src="logo.png" alt="Book Logo">
</a>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2></h2>
<p></p>
<address>
Written by <a href="mailto:xyz@abc.com">Demo Author</a>.<br>
Found at: Demo.com <br>
Address, Street<br>
UK
</address>
</article>
<article>
<h2></h2>
<p>content</p>
</article>
</section>
<aside>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</aside>
<footer>
<p></p>
<p>Copyright © 2013 Packt</p>
</footer>
</body>
</html>
