Read more

It's OK to put block elements inside an <a> tag

Henning Koch
January 02, 2017Software engineer at makandra GmbH

In general, you should not put a block element inside an inline element. So don't do this:

<span>
  <div>text</div>
</span>
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

The browser will think you wrote invalid HTML by accident, and will sometimes reorder elements silently.

There is one notable exception: It's OK to wrap block elements in a <a> tag in HTML5 (not 4). The spec says Show archive.org snapshot :

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

So feel free to use a single <a> link to make a series of block elements clickable:

<a href="/foo">
  <h1>title</h1>
  <p>text</p>
</a>

History of this exception

The XHTML 2 spec allowed most elements could have an href attribute. When XHTML 2 was abandoned in 2009 in favor of HTML 5, people wanted to bring over this feature to HTML 5, at least in some form. In the spirit of HTML 5, a pragmatic solution was chosen.

Posted by Henning Koch to makandra dev (2017-01-02 11:54)