A Little Information about Footer in HTML5
<footer>
The <footer> element is defined in the
spec as representing “a
footer
for its nearest ancestor sectioning content or sectioning
root
element.” (“Sectioning content” includes article, aside, nav,
section,
and “sectioning root elements” are blockquote, body,
details,
fieldset, figure, td).
For
now,
we’re
just having one footer on the page that is a child of the
body
element. As the spec says, “When the nearest ancestor
sectioning
content or sectioning root element is the body element,
then
it applies to the whole page.”
The
spec continues “A footer typically contains information
about
its section such as who wrote it, links to related documents,
copyright
data, and the like.”
Our
footer holds copyright data, which we’re wrapping in a
<small> element, too. <small> has been redefined in
HTML5;
previously
it was a presentational element, but in HTML5 it represents
small
print: “Small print typically features disclaimers, caveats,
legal
restrictions, or copyrights. Small print is also sometimes
used
for attribution, or for satisfying licensing requirements.”
Your
site’s footer probably has more than just a single copyright
notice.
You might have links to privacy policies, accessibility
information
(why are you hiding that out of the way?), and other
such
links. These should be wrapped in <nav>, despite the spec’s
advice.
It is
legitimate to wrap the links to other pages on the site
with
an <aside> inside the footer. After all, the links to other pages are
presumably tangentially
related
to the whole page rather than just the content
of
the footer.
Here,
I would use the following markup:
<body>
<div id=mainContent>
...
</div>
<aside>
<nav>
<h2>Twitter </h2>
<ul> ... </ul>
</nav>
<h2>Flickr </h2>
<ul> ... </ul>
</nav>
<nav>
<h2>How to learn HTML5</h2>
<ul> ... </ul>
</nav>
<nav>
<h2>Upcoming Lessons on HTML5 </h2>
<ul> ... </ul>
</nav>
</aside>
<footer>
<small>©2007 easilylearnhtml.blogspot.com </small>
</footer>
</body>
like . share . comment
#easilylearnhtml
No comments:
Post a Comment