HTML and CSS Reference
In-Depth Information
Our navigation is a single
<nav>
element containing multiple
unordered lists—each with its own heading (Jobs, Dating, CD
box sets, Today's paper, and so on), styled with a blue-grey
background and a thick red border-top.
However, contrary to my advice in the irst edition of this topic,
I haven't wrapped each list in its own
<nav>
element, because
my purpose is to help assistive technology users to find naviga-
tion. Lots of individual
<nav>
s next to each other would probably
make it harder rather than easier for those users. This is specu-
lation, however, and once assistive technologies support
<nav>
,
this would need to be user-tested.
“Sponsored Features” isn't inside
<nav>
as it's not primary navi-
gation; presumably, its main purpose is to advertise. There's
nothing to stop us styling its heading the same as the headings
inside the <nav> though, and that's what the design requires.
Now let's look at the main content area (
Figure 2.16
).
NoTE
I've included a
search form inside the
<nav>
(but outside the
<ul>
s);
it seems appropriate to me to
regard a search form as a navi-
gational aid. I've also given it the
ARIA role appropriate to its
function.
FIguRE 2.16
The main
content area of the Guardian
homepage.
MAIN coNTENT AREA
Unsurprisingly for a newspaper site, the main content area
of the Guardian homepage is given over to news articles. It's
important to notice that there is no overriding heading group-
ing the main articles (such as “top stories”); otherwise you could
wrap the whole thing up in a
<section>
. Therefore, you just have
