HTML and CSS Reference
In-Depth Information
<article>
Consider this real-world blog/news article:
<article>
<h1>Bruce Lawson Is World's Sexiest Man</h1>
<p>Legions of lovely ladies voted luscious lothario Lawson
¬ as the World's Sexiest Man today.</p>
<h2>Second-sexiest man concedes defeat</h2>
<p>Remington Sharp, JavaScript glamourpuss and Brighton
¬ roister-doister, was gracious in defeat. “It's cool
¬ being the second sexiest man when number one is Awesome
¬ Lawson” he said from his swimming pool-sized jacuzzi full
¬ of supermodels.</p>
</article>
It could be syndicated, either by RSS or other means, and
makes sense without further contextualisation. Just as you can
syndicate partial feeds, a “teaser” article is still an article:
<article>
<a href=full-story.html>
<h1>Bruce Lawson is World's Sexiest Man</h1>
<p><img src=bruce.png alt=”bruce lawson”>Legions of lovely
¬ ladies voted luscious lothario Lawson as the World's
¬ Sexiest Man today.</p>
<p>Read more</p>
</a>
</article>
“Block-level” links
Note from this example that you can wrap links around “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.
However, it turns out that all browsers quite happily (and consistently) allowed links to be placed around vari-
ous block-level elements (with a bit of coaxing—see
www.mattwilcox.net/sandbox/html5-block-anchor/test.
html
)
, and it was only the old HTML spec that didn't allow it, so in HTML5 one 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 artificially keep the structure as invalid.
It's always been a good idea (for accessibility and usability alike) to “front-load” important information
at the start of links. Now, with the possibility of having even larger chunks of content wrapped up as a
link, this is even more important (hat tip, Steve Faulkner—
http://www.paciellogroup.com/blog/2011/06/
