HTML and CSS Reference
In-Depth Information
alt="A screen capture of the figure element in action">
<p>
This mighty <figure> tag has returned from HTML 3 to haunt your
dreams.
</p>
</dd>
<dt>
Figure Ex-1
</dt>
</figure>
O
NLINE
http://htmlref.com/ch2/figure.html
Acting as a semantic element,
figure
simply groups items within an enclosed
<dd>
tag, though it may associate them with a caption defined by a
<dt>
tag as shown in the
example. You may desire to style a
<figure>
tag by placing a stroke around its visual
rendering or display it in some other appropriate manner; of course, that is the duty of CSS.
You should also note that the use of
id
on a
<figure>
will likely be useful to target using
links, as figures may be positioned away from the content that references them.
N
OTE
In early drafts of the HTML5 specification, the
<legend>
was used instead of
<dt>
and no
special tag was required for content enclosure.
Specifying Navigation
One new HTML5 element that is long overdue is the
nav
element. The purpose of this
element is to encapsulate a group of links that serves as a collection of offsite links,
document navigation, or site navigation:
<nav>
<h2>
Offsite Links
</h2>
<a href="http://www.w3c.org">
W3C
</a><br>
<a href="http://www.htmlref.com">
Book site
</a><br>
<a href="http://www.pint.com">
Author's Firm
</a><br>
</nav>
Conventionally, many Web developers have used
<ul>
and
<li>
tags to encapsulate
navigation and then styled the elements appropriately as menu items. This seems to
introduce quite a bit of ambiguity in markup because it may be difficult to determine the
difference between a list that has links in it and a list that is simply navigation. The
semantics defined by HTML5 for a
<nav>
tag eliminate this confusion. Interestingly, there is
no requirement to avoid using
<ul>
and
<li>
tags within navigation, so if you are a CSS
aficionado who is comfortable with that approach, it is fine to use markup like this:
<nav id="mainNav">
<ul>
<li><a href="about.html">
About
</a></li>
<li><a href="services.html">
Services
</a></li>
<li><a href="contact.html">
Contact
</a></li>
<li><a href="index.html">
Home
</a></li>
</ul>
</nav>
O
NLINE
http://htmlref.com/ch2/nav.html
