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