This exercise nests anchors within `<li>` elements. Wouldn’t it make more sense to make the entire `<li>` a clickable anchor by nesting the `<li>` in anchor tags instead?

Question

This exercise nests anchors within <li> elements. Wouldn’t it make more sense to make the entire <li> a clickable anchor by nesting the <li> in anchor tags instead?

Answer

This does make sense. However, this would be invalid syntax and should be avoided. As specified in mozilla docs, <li> elements should always be direct children of either <ol>, <ul> or the experimental <menu> tags.

44 Likes

Indeed, and i did that because i assumed the question meant to wrap <li> inside anchor tags which produced same output?

Why is this invalid syntax?

9 Likes

LI is a block level element. A is an inline element. We contain inline elements within block level elements, not the other way around.

We must also keep in mind that the specification is a recommendation, not a rule. It is a guide to building well formed documents that validate and conform to usability and accessibility guidelines.

61 Likes

That’s not correct. As CodeCademy says, in HTML 5 we can contain block-level elements inside A elements. LI is an exception and, even in HTML 5, we still can’t have it inside an A element. But other block-level elements such as headings can now be nested inside A elements and the document will be well formed and will validate.

2 Likes

I am a little bit confused as to why in the previous exercise the a element was wrapped around the img element, but in this exercise the li element is wrapped around the a element. How come the a element isn´t always the one that is wrapping around, wouldn’t that make it more consistent?

5 Likes

There is no one cookie-cutter approach to markup. The document outline and well formedness are the guiding principles. We choose markup by purpose.

<a href="#" title="jump to URL"><img src="#" alt="image with link"></a>

Above we have a link wrapping an image, rather than using link text.

<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>

Above we have a navigation menu comprised of a list of links with link text. This is pretty much the convention, these days.

4 Likes

I’m confused. I just ran the following code nesting inside the li within the anchor tag and it worked with the bullet point acting as a hyperlink too.

1 Like

As HTML is designed to be very fault tolerant, most browsers will in fact apply the specified link <a></a> to the <li> element. However, this is considered bad practice as it defies the W3C (World Wide Web Consortium) specification.

7 Likes

I did that too and it works. However, now the whole line (that the ‘Introduction’ is on) across the page becomes part of the link. Clicking anywhere on the line - even a blank area - opens the link. This may be okay if the link is in a specified width container but is hardly acceptable in a non-container situation!

5 Likes

i believe you actually are correct; the a element is always the one wrapping around, but in this case you have to take into consideration that the li element is NOT the anchor, it’s the text inside the a element. What you have is in fact a list of a elements, each of wich must be a li element for them to be on the list. I’m new to this so i may be wrong, but you could make a list of images in wich case the wrapping would be indeed li → a → img.

3 Likes

hello there, I got my code right. But I am trying to understand the logic for this code div id=“introduction”, the reason why we add id after div is for reference purpose later? I mean do you always have to do that when doing HTML? also
is the # sign used as the code to link to id? thanks!

For the most part, yes. It gives us an absolute hook since there can only be one element with that ID. We only ever need to give an element an id if we intend to hook it for styling (CSS) or behavior (JavaScript), otherwise it is not needed (superfluous).

ID is a global identifier that permits us to link to it, as well, so, yes.

https://www.example.com#introduction

The above link will go to the page, and scroll down to the page fragment with the id ‘introduction’ which will then be at the top of the viewport. We can also navigate within the page using page fragment identifiers as our links.

<a href="#introduction">Jump to Introduction</a>

We often find the following link dispersed throughout a lengthy page…

<a href="top">Jump to Top of Page</a>

At the top of the page we would have one element with the id, ‘top’.

5 Likes

thanks!! that was very helpful!

1 Like

There is a typo…

href="#top"

as opposed to,

href="top"
2 Likes

I understood everything and tried on my lesson. But when I tried to link the introduction without providing division Id, it didn’t work which is normal. But in case of [ Jump To the Top ] there is no division with id=top, then why the link is working perfectly?

For all we know, 'top' may be a globally defined variable. We don’t know. If in fact the link worked with said id in the markup, then that is all we have left to assume.

1 Like

Thank you for your help :smile:

I think I am just missing something here. I cant seem to figure out where I went wrong.

Could someone possibly take a look?

Thank you!