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.
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.
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.
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?
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.
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!
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.
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’.
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.