Posted over 2 years ago. Visible to the public. Repeats.

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

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

<span> <div>text</div> </span>

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:

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.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Henning Koch
Last edit:
about 1 month ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more