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.
Rationale
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 display:block;
Entry Information
- Posted:
- Tue, 19th Jan 2010 at 21:01 UTC
- Filed under:
- Tags:
Comments
skip to comment formThere 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