HTML and CSS Reference
In-Depth Information
<HEADER> AND <FOOTER>
So, what about site headers and footers? You would traditionally mark these up
using something like this:
<div id=”header”></div>
<div id=”footer”></div>
Pretty much every website or app has these. The header (or masthead) con-
tains the site logo, title, and so on, and the footer contains site-wide content like
copyright, accessibility statement, and so forth. The HTML5 creators recognized
this and introduced the following unambiguous semantic elements to do the job:
<header></header>
<footer></footer>
If you refer back to my sample blog pages, you'll see some examples of
<header>
and
<footer>
usage. Note that there are some inside
<article>
s and
<section>
s.
This is perfectly allowed: You can do this to specify headers and footers just for
subsections of your content rather than the whole site. You can therefore have
multiple
<header>
s and
<footer>
s in a single document.
<ASIDE>
The
<aside>
element is really a special kind of
<section>
, specifically tasked
with containing secondary information related to the main content of the site
that doesn't fit within the main flow. Good examples include a biography of the
author of that page, a mini interview with the author, or a bibliography/references
and further reading. It can, however, also be secondary content on the site, like
a typical sidebar, a blogroll, or a list of other blog posts on the site you might be
interested in (even if they are not posts related to the main content). The list of
Tweets in my previous example is suitable as an
<aside>
.
