When shall I use list-element in HTML

Question

I have never used list before. I have created a website with over 30 000 LOC and never use a single list-element. But when I look at the source code of other say Twitter they use list all the time. What is the advantage of using list-elements? Most of the time I can achieve the same result with div-elements in terms of lay-out

Answer 1

Semantics. Items in a list are typically related by their meaning, not just their layout.

Answer 2

Chances are if you're using a table with one column you are using the table for layout, this is a good candidate to replace with a list

Answer 3

You should use lists when they are semantically the best choice. When you're creating some HTML, ask yourself the following question:

Am I making a list of things?

If your answer is yes, you want to use the list element, or if it's a list with two or more columns of related information, a table.

By comparison, a list of items created using divs has no meaning. Take the following example of a list:

1. Sausages
2. Bacon
3. Pork
4. Gammon

That is a list of pig meat products, and normally, your HTML should look like this:

<ol>
  <li>Sausages</li>
  <li>Bacon</li>
  <li>Pork</li>
  <li>Gammon</li>
</ol>

This tells us and the browser that all the items in that list are related . They all have a common attribute (in this case, that they are pig meats). If however you were to use this code:

<div>Sausages</div>
<div>Bacon</div>
<div>Pork</div>
<div>Gammon</div>

That tells us (and the browser) nothing about the content, only that they exist on the page. From a styling point of view (ie CSS), it doesn't make much difference, and may even make life easier, but it's (a) an abuse of the div element (see: Divitis ), and (b) bad for accessibility, since screen readers and other similar software will not be aware that the data is related. Your search engine optimisation can also suffer (in theory).

Do bear in mind that it doesn't have to just be a list of text data, like above. A list of navigation links is still a list , and you should mark it up as such. For example:

<ul class="site-navigation">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a href="login.html">Log in</a></li>
</ul>

Answer 4

It used mostly for creating menus, but the same results can be easily achieved with div elements. It is more easy to control your menu if it's a simple list, and I think search engines also prefer them

Answer 5

I'm with Giles on this one, but wanted to expand a bit. A list of items holds semantic value. Anything you list in a page most likely belongs in a list. Examples are:

• Products
• Navigational menu items
• Share links (eg Facebook, Twitter, LinkdIn, reddit, etc)
• This list itself belongs in a list:)

Also, imagine a scenario in which styles are not applied or are applied differently (very common on mobile browsers, especially those not on newest/advanced smartphones), or if someone using Firefox goes into View -> Page Style and selects No Style to. You still want your page to make sense. If you're listing items on a page, you still want them to appear as some sort of list, not just a bunch of DIVs. DIVs have no semantic meaning except to organize things in separate containers and layout control.