HTML and CSS Reference
In-Depth Information
This remains simply an
<article>
, although we'd probably need
a
class
or
id
to allow special styling.
Below the featured article, you have some sections that aren't
the top stories (there is less information on the homepage, and
they're primarily, but not solely, links to other pages). They each
have their own heading (“Best of guardian.co.uk,” “Latest multi-
media,” “What you're saying”), and then a group of articles. The
natural elements are therefore
<article>
s within
<section>
s:
<section>
<h2>Best of guardian.co.uk</h2>
<article>
<h3>Is Britain broken?</h3>
...
</article>
<article>
<h3>Notes and queries</h3>
...
</article>
<article>
<h3>Tech Weekly live: Personal privacy</h3>
...
</article>
...
</section>
<section>
<h2>Latest multimedia</h2>
...
</section>
On the website (but not in the screenshot), there are also a cou-
ple more
<nav>
blocks (“Trending,” “Campaigns and Investiga-
tions”) and a “fat footer” that, as we saw in Chapter 1, should be
a couple of page-wide
<nav>
blocks outside the “real”
<footer>
that contains the usual privacy, terms and conditions, and acces-
sibility information.
And there, ladies and gentlemen: an HTML5 version of
www.guardian.co.uk
.
Like any other exercise in markup above
the level of the trivial, there are legitimate differences of opinion.
That's OK. HTML is a general language, so there aren't elements
for every specifi c occasion.
