Thursday, 10 October 2013

Footer in HTML5


 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>&copy;2007 easilylearnhtml.blogspot.com </small>
</footer>
</body>

like . share . comment
#easilylearnhtml