Links around the blocks

Can I wrap a link block elements?

Previously it was impossible - it was forbidden directly in the HTML4 specification . At that time, we were thinking more about text sites, where the usual blue links were.

In the current HTML5 specification, block elements can be wrapped in links. The W3C validator does not swear at this now and browsers correctly handle such nesting.

But there is a nuance. If you put the link in the link, then what happens when you click on this? Which link will respond? Unclear.

Therefore, the specification directly prohibits: you cannot put interactive elements in a link.

<a href="">  <a href="">  </a> </a> 

What other interactive elements are there besides the link? For example, with whom you can interact. Buttons, form fields and labels for them, audio and video elements, if they have controls enabled.

 <a href=""> <button></button> </a> 

The whole thing is interactivity: if the controls are disabled and the video with audio is played by itself, then it is already possible, they have become non-interactive.

 <a href=""> <video></video> <video controls></audio> </a> 

And if you set the tabindex attribute to any element so that it can be selected from the keyboard, then it will become interactive and can no longer be wrapped in a link.

You can, of course, do tricks with positioning when you don’t put the block inside the link, but position the link over the block. So you can bypass the restriction of the validator, who will not notice this.

But in this case, you can still find yourself in a situation where you have a link above a link or other interactive element and it is not clear what you can click on and what you don’t.

And it also provokes to make empty, inaccessible links without text inside and then the screen readers do not understand where it leads. Do not do this.

 <a href=""></a> <article>    </article> 

There are other, even more difficult tricks to include links. This was written by Roma Komarov , read if interested.

Remember the main thing: the blocks can be wrapped in links, as long as there are no interactive elements inside.

Video version

Questions can be asked here .