In this exercise we nested an `<img>` element within an `<a>` element to make images clickable links. Can we nest any element within `<a>` tags? (li elements?)


#1

Question

In this exercise we nested an <img> element within an <a> element to make images clickable links. Can we nest any element within <a> tags? (li elements?)

Answer

With HTML5, the <a> tag can now contain both inline and block-level elements. For example, we can nest heading elements within <a> tags like so:

<a href=”#”><h1>Example</h1> </a>

This would make the entire <h1> element clickable!

That having been said, one block-level tag which we do not want to nest within an <a> tag is the <li> tag. <li> tags should always be direct children to either <ol> , <ul>, or the experimental <menu> tags.

To learn more about inline and block-level elements, check out our “Learn CSS” course.


FAQ: Learn HTML Elements - Common HTML Elements - Linking At Will
#2

Why can’t I see ‘Example’ in this answer?


#3

Because the markup wasn’t right, you should be able to see it now.


#4

I still cant see the example working out, it has the icon of a broken image


#5

From the basic definition of an anchor, it is an inline element, not a container for other block level elements. This example is blatantly incorrect and (without yet testing) surely to raise some warnings from a validator.

<h1><a>Example</a></h1>

is more semantically clear. The inline element is contained by the block element. That makes sense.

An OL and UL parent element can only have LI as direct children. We would never wrap an LI in a link. The link would go inside that block level element.

<ul>
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</ul>

It’s not a surprise that we might see,

<a><div></div></a>

Browsers are very forgiving and try their best to render something. The A in this example might even take the dimensions and position of the DIV, but it still goes against the grain. Inline elements should not be used to contain block level elements. It traces back to semantics and document outline.

It should be noted that IMG is an inline element.


#6

Now as we’ve seen in terms of anchors, above, the same would apply to inline elements without a parent container. That is, inline elements floating in a sea of block elements. This is a rendering issue waiting to happen.

Inline elements need to be contained. Block level elements ARE containers. At the very minimum, images should be contained by a DIV, but a P (paragraph) is even better.

HTML5 gives us the FIGURE element which when studied will reveal so much of what early developers had to grapple with in terms of WCAG and SEO.


#9