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
Johan Rönkkö
28,054 PointsNavigation flexbox and setup
In the navigation, should the 'a' go inside the 'li' or vice versa? What are the perks?
When making a Navigation with flexbox, does the html setup matter? I have a hard time making a navigation with this html setup:
<header>
<h1>Logo</h1>
<nav>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</header>
Why is that?
2 Answers
Tim Holley
8,464 Pointsthe nav tag is new to HTML5 and is used to semantically divide your HTML into sections that make sense by name. I personally tend to use the nav tag for the container of my navigation bar, and then a ul with an id of nav for my actual navigation.
Tim Holley
8,464 PointsThe a tag has to go inside of the li, because the ul tag will only accept li as it's direct child.
Your HTML looks correct. Are there any specifics that you are having trouble with?
Johan Rönkkö
28,054 PointsOkej thank you!
I'm kinda new to flexbox and I find it complex sometimes though it really is simple in theory. I usually see people build navigations without the 'nav' tag and give the 'ul' a class of nav instead, why is that? It confuses me and it makes me wonder if my html is weak. Are there any perks of ignoring the nav tag?
Johan Rönkkö
28,054 PointsI know discovered that display: flex; doesn't work on the 'nav' tag, instead i had to give display: flex; to the 'ul'. Maybe you can only give flex to direct children's?