HTML and CSS Reference
In-Depth Information
Yo u m i g h t b e w o n d e r i n g w h y t h e
pubdate
attribute is needed
at all. Why not just assume that any
<time>
element in an
<article>
's
<header>
is its publication date?
Consider this example:
<article>
<header>
<h1>Come to my party on <time datetime=2010-12-01>1
¬ December</time></h1>
<p>Published on <time datetime=2010-06-20
pubdate
>20
¬ June 2010</time></p>
</header>
<p>I'm throwing a party at Dr Einstein's Cabaret
¬ Roller-disco Bierkeller Pizza-parlour-a-gogo. Do come
¬ and dance to Rusty Trombone's Swingin' Brass Band.
¬ (Formal dress and lewd hat required.)</p>
</article>
Yo u ' l l s e e t h a t t h e r e a r e t w o d a t e s w i t h i n t h e
<header>
: the date
of the actual party and the publication date of the article. The
pubdate
attribute is required to remove any ambiguity. And yes,
you are invited—just don't get drunk this time.
More fun with headers and footers
The main surprise with our article makeover is that each article
can have its own
<header>
and
<footer>
. This means that,
in addition to the “main” header and footer on a page, each
article can have its own headers and footers as well. They can
be separately styled with CSS: for instance,
body>header
and
body>footer
target the main headers and footers (assuming that
they're direct descendants of
<body>
), whereas
article>header
and
article>footer
target the inner structures.
To i n c l u d e To l d v e r s i To n s To f I n t e r n e t E x p l To r e r, y To u c a n t a k e a d v a n -
tage of specificity. Define generic header and footer styles, and
then redefine/override them for article header and article footer:
header {display:block; color:red; text-align:right;}
¬ /*page header */
article header {color:blue; text-align:center;}
¬ /*article header */
Note that so far you've introduced no
id
s or
class
es as hooks
for CSS.
