ptg16476052378 LESSON 13: Structuring a Page with HTML5
Here’s how the <nav> element is used in the earlier HTML5 example:
<header>
<img src="logo.png">
<nav id="topmenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products.html">Products</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</header>A page can contain many <nav> elements, and it’s perfectly fine to add id or class attri-
butes to distinguish them from one another.Articles
The <article> element is another sectioning element, but unlike <header> and
<footer>, it is included in the document outline. It is equivalent to the <section> ele-
ment, with special semantic meaning. Here’s how the HTML5 specification defines an
article:
“The article element represents a complete, or self-contained, composition in a docu-
ment, page, application, or site and that is, in principle, independently distributable
or reusable, e.g. in syndication. This could be a forum post, a magazine or newspa-
per article, a blog entry, a user-submitted comment, an interactive widget or gadget,
or any other independent item of content.”
One thing to note is that articles can be nested within sections and vice versa. For exam-
ple, a section of the page may contain multiple articles, or an article can contain multiple
sections.
Just like ordinary sections, articles can also contain their own header, footer, or naviga-
tion. They can also contain their set of headers.FIGURE 13.4
Section-specific
navigation.