HTML and CSS Reference
In-Depth Information
<aside>
<nav>
<h2>guardianjobs</h2>
<form role=search ... > ... </form>
<ul>
<li><a href=#>Upload your CV</a></li>
...
</ul>
</nav>
<nav>
<h2>Online Dating</h2>
...
</nav>
<section>
<h2>Sponsored Features</h2>
<section>
</aside>
Note that I've included a search form in the
<nav>
; it seems
appropriate to me to regard a search form than a navigational
aid. I've also given it the ARIA role appropriate to its function.
“Sponsored Features” isn't inside
<nav>
as it's not primary naviga-
tion; presumably, its main purpose is to advertise. You may dis-
agree with me (I promise I won't get all huffy), and so you might
choose to mark everything up in one wrapping
<nav>
:
<nav>
<h2>guardianjobs</h2>
<form role=search ... > ... </form>
<ul>
<li><a href=#>Upload your CV</a></li>
...
</ul>
A SIDEBAR OF
NAVIGATION
<h2>Online Dating</h2>
<ul>
...
</ul>
...
<h2>Sponsored Features</h2>
<ul>
...
</ul>
</nav>
FIGURE 2.15
A sidebar of
navigation on
the right side
of the Guardian
homepage.
