HTML5 wrapping anchor behaviour
Takeaway nugget of information: If you’re wrapping block level elements in an anchor, remember to set the anchor to
display:block; to avoid unexpected styling issues.
If you want to see code examples, please see the example page that accompanies this post.
In HTML5 you can now wrap block level elements in an anchor tag. This is useful but can lead to unexpected behaviour if you’ve got an idea in your head that a wrapping anchor would behave like a wrapping
<div> or other block-level element you’re used to wrapping things with. It’s important to remember that by default an anchor is not a block-level element. It’s inline.
So to behave as you expect when styling such a wrapping anchor, you’ll need to set it to
- Tue, 19th Jan 2010 at 21:01 UTC
- Filed under:
Commentsskip to comment form
There is a drawback with Firefox here, have a look at http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#highlighter_741571 (beginning at "HTML5 lets user wrap…")
FF 3.6 still has this problem, as you can see on the test page.
Ah, the anchor id-selector isn't working, so just look for the above mentioned text to find it, or have a look at the test page: http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/smashing-html5/files/block-level-links.html