Jump to main navigation, main content

Archived entry | Matt Wilcox .net

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 display:block;


skip to comment form
  1. Marcel Korpel posted 10 days, 4hrs, 1mins after the entry and said:

    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.

  2. Marcel Korpel posted 10 days, 4hrs, 4mins after the entry and said:

    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

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.