HTML and CSS Reference
In-Depth Information
<p>Read more</p>
</a>
</article>
“Block-level” links
Note from this example that you can wrap links round “block-level” elements. In the HTML 4 spec, this is
not allowed, so you would probably have links around the heading, the teaser paragraph, and the phrase
“read more” all pointing to the same destination.
In HTML5 the single link can surround the whole
<article>
. As the browsers already handle wrapping
links around block-level elements, and there is an obvious use-case, there was no reason to artifi cially
keep the structure as invalid.
XHTML 2 had a comparable mechanism, which allowed
href
on any element but, of course, this isn't
backward-compatible; current browsers simply laugh at
<div href=”full-story.html”>
and then
ignore it. What's interesting about “block-level links” is that they work in browsers now with a hint or two—
Well, almost. There's currently a parsing bug in Firefox that Remy calls the “Vomit Bug” (
remysharp.
com/2009/08/10/defining-the-vomit-bug/
). It prevents Firefox from rendering anchors that contain some
new HTML5 elements such as
<section>
. However, it's pretty weird to want to put whole sections inside
link text. If you stick to HTML 4 elements such as paragraphs, headings, images, and so on, Firefox works
just fi ne. It's also a known bug that disappears if the HTML5 parser is turned on.
As you've seen, comments on blog posts are
<article>
s inside
a parent
<article>
. There are other uses for this nesting beside
comments, for example a transcript to a video:
<article>
<h1>Stars celebrate Bruce Lawson</h1>
<video>...</video>
<article class=transcript>
<h1>Transcript</h1>
<p>Supermodel #1: “He's so hunky!”</p>
<p>Supermodel #2: “He's a snogtabulous bundle of gorgeous
¬
manhood! And I saw him first, so hands off!”</p>
</article>
</article>
The transcript is complete in itself, even though it's related to the
video in the outer
<article>
. The spec says “When article ele-
ments are nested, the inner article elements represent articles
that are in principle related to the contents of the outer article.”
