html5_new_tags/index.html
Line 1 <headerid="page_header">
2
</header>
<h1>AwesomeCoBlog!</h1>
3
You’re not restricted to having just one header on a page. Each section or
article can also have a header, so it can be helpful to use the ID attribute like
I did on line 1 to uniquely identify your elements. A unique ID makes it easy
to style elements with CSS or locate elements with JavaScript.
Footers
The <footer> tag defines footer information for a document or an adjacent
section. You’ve seen footers before on websites. They usually contain informa-
tion like the copyright date and who owns the site, although it’s common for
footers to contain complex navigation structures. The specification says we
can have multiple footers in a document too, so that means we could use the
footers within our blog articles.
For now, let’s define a simple footer for our page. Since we can have more
than one footer, we’ll give this one an ID just like we did with the header. It’ll
help us uniquely identify this particular footer when we want to add styles
to this element and its children.
html5_new_tags/index.html
<footerid="page_footer">
<p>Copyright© 2013AwesomeCo.</p>
</footer>
This footer simply contains a copyright date. However, like headers, footers
on pages often contain other elements, including navigational elements.
Navigation
Navigation is vital to the success of a website. People simply aren’t going to
stick around if you make it too hard for them to find what they’re looking for,
so it makes sense for navigation to get its own HTML tag.
Let’s add a navigation section to our document’s header. We’ll add links to
the blog’s home page, the archives, a page that lists the contributors to the
blog, and a link to a contact page.
Your page can have multiple navigation elements. You often have navigation
in the header and the footer, so now you can identify those explicitly. Our
blog’s footer needs links to the AwesomeCo home page, the company’s “about
us” page, and the company’s terms of service and privacy policies. We’ll add
these as another unordered list within the page’s <footer> element.
Chapter 2. New Structural Tags and Attributes • 18
Download from Wow! eBook <www.wowebook.com> report erratum • discuss