Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do we use unordered lists to make navs?

Tags:

html

css

Why do almost everybody I see use this kind of structure when creating some sort of navigation

<ul>
    <li><a href="/link1">link1</a></li>
    <li><a href="/link2">link2</a></li>
    <li><a href="/link3">link3</a></li>
</ul>

instead of this?

<div>
    <a href="/link1">link1</a>
    <a href="/link2">link2</a>
    <a href="/link3">link3</a>
</div>

What are the advantages of the first one compared to the last one? Since so many are doing it this way.

like image 590
Alex Avatar asked Jun 07 '15 06:06

Alex


People also ask

Why is UL used for NAV?

By using a ul , it's very clear where the beginning and where the end is, and that's especially important for navigation menus, because a navigation entry often only make sense in comparison to all the others (finding the right link for your goal is often only possible by checking all available navigation links and ...

Should you use UL for NAV?

In the past, nav was used to “contain” a list of navigation links. Now the nav element exists and, by definition, groups the links. So the ul is unnecessary.

What is the use of unordered list?

An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists.

Should I use list for navigation?

If you Google around on whether or not you should use lists as the markup for navigation on websites, you'll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists for navigation. The vast majority of templates you see will use lists for navigation.


2 Answers

It's about semantic use of html. You have a list of links, so you use the appropriate html element which in this case is either a <ul> (if order doesn't matter semantically) or an orderer list <ol> (if order is meaningful, for example if you have a month navigation listing January to December).

https://en.wikipedia.org/wiki/Semantic_HTML

http://www.html5rocks.com/en/features/semantics

like image 189
connexo Avatar answered Oct 09 '22 01:10

connexo


In short, because the content is a list of links, so we write markup that reflects that.

It gives us more options for styling the links (since the additional markup gives us more elements to play with), and it lets us tell them apart without access to visual styling.

Screenshot of Lynx

like image 38
Quentin Avatar answered Oct 09 '22 01:10

Quentin