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

HTML

Posted by Scott Moore
Scott Moore
4,050 Points

Using the <ul> <li> for markup

So here's a question. Do we really need to do all this extra mark up? We have been taught to do this for a long time. Why? It takes up extra time of coding. What is the reason behind it? Couldn't we just do a div and label it "nav" or whatever you label it and then just add the A ref. I was just reading an article and got me thinking. I know its been a long time teaching, but semantically its less code and seems like it would be easier to format. Thoughts?

4 Answers

James Barnett
James Barnett
39,199 Points

Because its a list of links without any particular order thus the most semantic choice is to use <ul>.

Per the HTML5 spec:

> In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

from: http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

Scott Moore
Scott Moore
4,050 Points

James, Thanks for that. I always forget to go to W3.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

IMO, semantically list items for navigation make MORE sense. What is navigation in it's most primitive form? It's a list of links. To search bots, a unordered list with list items describes something. A bunch of divs do not.

Also, in a worst case scenario, if your CSS doesn't load, or the browser ignores it, you still have the browsers default styling and layout for list items should things go bad. It won't be pretty, but at least the browser will render some hierarchy to the links if they are in a list element.

I think by what you give up by having extra markup you gain so much more in having elemental markup that helps describe the content of the page. A div is just a block, it's meaningless in semantics.

Michael Arends
Michael Arends
27,513 Points
Michael Arends
Michael Arends
27,513 Points

I think the idea is that it makes everything easier to read. Each li is like a container and you can decide what to put in that container. If everything was div then it would be much more difficult to read. That is my uneducated opinion.

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

personally i think with things like a nav, a list is much easier and less messy to style in css than a combination of divs and <a> tags, plus its easier to read particularly if someone else is looking at your code.