Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jason Marlin
1,166 PointsWhat is the proper nesting hierarchy in HTML?
Ive been getting an error during the challenge immediately following the list + links video. I think I solved the problem, I improperly was nesting <li> items within an <a> tag when it should have been the other way around.
My question is, how do I know what the proper nesting order of tags is? I mean I definitely know the difference between block and inline elments, but what happens when they are all inline like <li> and <a>? How do you know the proper order? Is there some resource we can consult on this order of operations so to speak?
3 Answers
Steven Parker
231,269 PointsNesting is unrelated to display type.
For nesting restrictions, you might want to check the documentation for the specific elements involved. For example, on this MDN page for <li> it states that they are only permitted inside <ul>, <ol>, or the yet-unimplemented <menu> tags.
Perhaps an easier rule to remember is that <ul> tags (or <ol>'s) are only permitted to contain <li>'s.
Steven Parker
231,269 PointsYour example seems a bit foggy .. I'm not sure what you mean by "above" since they can't all mean nesting. For example, "<body>" cannot be inside "<tltle>" or inside "<head>".
The trick to "a" and "li" becomes more clear when you think about what they represent. An "li" is a list item, which means it must be part of a list (ul/ol). It cannot be directly inside anything else. But an "a" can be inside most anything except another "a".
Happy coding!
Jason Marlin
1,166 PointsSo I reviewed some information on block and inline elements and I think I understand what you mean.
My original thought process was that since block elements may contain inline elements but not the other way around, that they were "above" them but it seems this may not be useful when thinking about the other functionality of HTML. Here is another example of my thinking: <HTML> ---above---<Head>---above---<title>---above---<Body>---above----<div>---above---<span>---above---<a>---above---<img>....etc. Its like a bunch of Russian nesting dolls with the larger encompassing the smaller. Unfortunately I still don't understand the logic / or reasoning why <a> cannot contain <li> but the reverse is true...I suppose I'll just have to march forward with this question mark hovering in the background. : |
Thank you for your help!
--ps: perhaps the word "scope" or range is a better word than hierarchy where this matter is concerned. Meaning the extent to which its influence can reach.... scratches chin
Jason Marlin
1,166 PointsJason Marlin
1,166 PointsThank you for the response Steven that link is very useful :D
Though I didnt understand a few things in your response post. What did you mean by this "nesting is unrelated to display type"? Display type is a css property is it not? I'm not talking about CSS right now, only pure HTML. Aside from that though, I greatly appreciated the resource link you posted because it is essentially the kind of information I was looking for, however, I was hoping to find something more than just a solution to this specific problem. Perhaps some kind of logic or formula which would allow me to know the syntax/heirarchy/ for future situations assuming I don't know what it is. I was just hoping I would not have to say look up the specific element's info that I'm working with everytime to be able to know how it will work with its ancestor / descendant tags.
Also, just to be clear if I want to make a list item a link this is the proper format for it right?
<ul>
<li><a href="https://www.yahoo.com/">test this list1</a></li> <li><a href="https://www.google.com/">test this list2</a></li> <li><a href="https://www.nytimes.com">test this list3</a></li>
</ul>
Steven Parker
231,269 PointsSteven Parker
231,269 PointsYou mentioned "proper nesting order" and then "block and inline elements", so I was pointing out that those two concepts are not related.
Just like the <ul> example, any restrictions on nesting will pertain to the particular tag type involved. Another example: a <select> element can only contain <option> and <optgroup> elements. There's no generic "formula" that would explain all such restrictions, but with experience some of them will start to just "make sense" to you.
And yes, your list of links is correct since the <ul> only directly contains <li>'s.