HTML and CSS Reference
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
FIguRE 2.16 The main
content area of the Guardian
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