Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Johan Rönkkö
Johan Rönkkö
28,054 Points

Navigation 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
Tim Holley
8,464 Points

the 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
Tim Holley
8,464 Points

The 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ö
Johan Rönkkö
28,054 Points

Okej 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ö
Johan Rönkkö
28,054 Points

I 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?