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
Frantisek Musil
5,403 PointsCorrect navigation in HTML5
Hi guys,
I am wondering about the correct usage of unordered lists in HTML5 when making navigation. I have made about 50 navigations using lists, but I removed the list default styles everytime. So since there is a <nav> element in HTML5 isn't it easier and smarter to make navigation like this:
<nav>
<a></a>
<a></a>
</nav>
this would simplify your code a a little bit and the default styles suit more the actual needs.
Btw. For nested navigations you can use nav inside you parent nav, so it would be exactly the same as using <ul>
James Barnett
39,199 PointsI fixed the formatting so that code shows up correctly now.
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsA site navigation is a list of links so it makes sense to put them in an unordered list. Think of the <nav> element as a way to give more meaning to your unordered list. Not a replacement for it. You never want to sacrifice semantics to make your css easier to write.
If you find yourself repeatedly having to remove the bullet points from your navigation lists then consider putting that in a css reset. Or if you prefer normalize.css then look at what it does about this and customize if needed. Then you only have to include this file in your project and you won't have to keep writing that same css over and over again.
James Barnett
39,199 PointsYou should use normalize.css instead of a css reset however it's important to note that normalize.css doesn't remove list bullet points.
I like the idea of customizing, you could write your own base stylesheet, using @import for normalize.css and then added your own custom rules.
Jason Anello
Courses Plus Student 94,610 PointsI've used Eric Meyer's css reset in the past and it does remove bullet points. I agree with you though that normalize.css is probably better to use. It seems to go a bit farther and do a little more for you than a css reset.
Frantisek Musil
5,403 PointsSorry, I've updated my question...
James Barnett
39,199 Points> this would simplify your code a a little bit and the default styles suit more the actual needs.
Content and styling should be separate, you should never let default styling influence your semantic choices in the markup. If you have a listing of <a> elements that have no specified order then the correct markup is to use a <ul>.
Frantisek Musil
5,403 PointsThank you both for replies. However, I thought the same, but according to this article:
http://css-tricks.com/wrapup-of-navigation-in-lists/
There is just very little defference and not just that:
http://css-tricks.com/wrapup-of-navigation-in-lists/#comment-277260
I think, that by adding role to your elements, you provide much more semantical content.
What do you think about article and comment above?
James Barnett
39,199 PointsThe article concludes that going with lists is probably a better idea.
- Simpler markup.
nav > ais easier/less thannav > ul > li > a
That's kinda silly as in many cases you can use nav a instead
- Divs and spans can be just as good, especially with ARIA roles
If you used aria-roles you'd probably end up typing as much as you do with using lists. Check out this codepen posted in the comments http://codepen.io/bkbillma/pen/mKkEv
Jason Anello
Courses Plus Student 94,610 PointsI agree with James.
That article you linked to was a follow up to this article: http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/
In the earlier article, Chris was in support of not using a list.
Based on the comments left at the earlier article, Chris Coyier wrote the followup article which you linked to. In it he concluded that using lists was the best choice.
You also might be interested in reading the article that Chris links to about "Leaving accessibility to the experts" http://www.webaxe.org/leave-accessibility-to-experts-please/
It should also be noted that the codpen demo from the comment that James linked to contains invalid markup. The <span> element can only contain phrasing content. The <nav> element is not in the phrasing content category.
James Barnett
39,199 Points> The <span> element can only contain phrasing content. The <nav> element is not in the phrasing content category.
Jason Anello - Isn't the solution to this as simple as swapping out the <span>s for <div>, as divs can contain flow content and <nav> is flow content.
Jason Anello
Courses Plus Student 94,610 PointsThat would make the markup valid but I don't know enough about screen readers to know what the implications of that would be.
There may have been a specific reason a <span> was used as it pertains to screen readers and the author may not have realized they were creating invalid markup in the process.
If screen readers don't treat span's and div's differently then I think your solution would probably be fine.
This all seems forced to me though.
What few articles I've read on this in support of not using the list do not seem to be based on any really solid evidence.
The other thing I wonder about is if it's perfectly acceptable to not use a list for navigation links then why isn't it included as an example in the spec? I realize they can't show every possible situation but this seems to be an important one since it deviates from the standard practice. If the working group intended for the nav to sort of replace the <ul> then it seems to me that it would be important to state this.
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Frantisek,
The html has been stripped out of your question. So it's hard to make out what you're saying here.
https://teamtreehouse.com/forum/posting-code-to-the-forum
If you decide to edit your original question then leave a comment here saying you've done so. Anyone subscribed to this post won't receive notifications on post edits.