Can we nest any element within `<a>` tags? (li elements?)

Frequently Asked Questions HTML FAQ
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.

34 Likes
2

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

3 Likes
3

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

1 Like
4

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

9 Likes
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.

131 Likes
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.

49 Likes
11

But It works perfectly in modern browsers like crome, firefox…

12

Pretty much anything goes in HTML. The browser will never raise an exception or even complain. That’s why the specifications are recommendations, not syntax rules.

HTML development is designed around document structure and the outline. Validators look for well-formedness. Accessibility testing looks for roughly the same thing, only along a stricter line. Don’t be surprised that anything one tries will work. Is it well formed, though? That’s the question a responsible developer will ask.

20 Likes
14

No, it will send an invalid error to you

15

Does this mean that this should be
<h1><a href="https://www.example.com">Click me!</a></h1>
instead of
<a href="https://www.example.com"><h1>Click me!</h1></a>

This image in the link below is from the Learn React Course here in Codecademy.
image|412x412

2 Likes
16

The browser is very error resistant, and not everyone respects the w3c standards.

the anchor element does not allow headers as child element, so should indeed be like you said

4 Likes
17

Technically, the anchor element may contain flow content and phrasing content, so H1 is an allowed child. Some of us still go by the old rule that stated inline elements should not contain block level elements. That was just a rule of thumb, though, not a spec.

To experiment with differences in the above examples, give the H1 a background color.

2 Likes
18

@wiki-bot
Yes, you can wrap up a li element in a anchor tag.

19

But would we? A typical navigation list looks like,

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

This makes sense. The block element wraps the inline element and there is no need for a printable character between the links (an accessibility requirement when links are next to each other).

In order to give an answer like that above we need to examine use case and context.

9 Likes
20

Thanks for all your clarifications. :passport_control:

2 Likes
21

You can also nest br

24

Is there a way to define error handling in HTML?

25

No. It is up to the author to validate markup prior to publishing. It’s all declaration and no logic.

1 Like