Why should I use UL/LI in my HTML?

问题:

I have the following structure that seems really nice for me and I always use HTML5:

<div class="drop-menu" data-dropmenu="language">
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Brasil)</span></a>
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Portugal)</span></a>
  <a href="language/es" class="drop-menu-link">Español</a>
  <a href="language/en" class="drop-menu-link">English</a>
  <a href="language/ja" class="drop-menu-link">日本語</a>
  <a href="language/it" class="drop-menu-link">Italiano</a>
  <a href="language/de" class="drop-menu-link">Deutsch</a>
  <a href="language/fr" class="drop-menu-link">Français</a>
</div>

So why should I use a list structure (ULs/LIs) if just A elements shown as blocks does the job? Is it REALLY useful to use lists in this case? I always do like this and it seems so good.

回答1:

It is more semantically correct.

What you have above is an unordered list of languages. You should be using an unordered list of items (UL element with LI elements) to be semantically correct about it.

This also helps screen readers and other technologies that depend on correct semantics to work.

回答2:

The opinions from a blind person using the JAWS screen reader suggests not using ul and li elements for menu or navigation lists.

https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

Although you should nest the anchor elements inside a nav element if it is a navigation menu of some kind... that is its options will lead the user to new views/pages. If it is just a list of non-interactive data, then perhaps a section or aside element would work.

For a list of elements with interactive options that don't lead to a new page (i.e. just send a get/post request) its less clear what to wrap it in. I think a nav element could still make sense semantically (you're navigating the database/CRUD aspect of the page), or just a section/aside element could still work.

There's partial support for a menu element that would be nice for that :(

回答3:

Also because, without CSS, your menu renders inline like a sentence...

Português (Brasil) Português (Portugal) Español English 日本語 Italiano Deutsch Français

...rather than a nicely formatted (albeit rather dull looking) list.

回答4:

To add to Oded's answer, specifically the reason you want to be semantically correct is for all the web users out there who aren't using a normal browser. Consider as an example a blind person using a screen reader, or some sort of web crawler.

回答5:

There are (at least) two good reasons to use lists. Using lists can help to give an idea of your site's structure which is good in terms of SEO but also if people use either custom CSS or screen readers for accessibility reasons. The second and slightly related one is that it's rather helpful when it comes to creating stylesheets. You don't need to come up with your own way of nesting elements. Just use lists and go from there. Then you can focus on getting the stylesheet right providing different styles for different hierarchy levels, first, last, odd or even list items.

Content from this answer.

回答6:

This is recommended for the purpose of making your markup semantically descriptive. Since your drop down menu is, in essence, an unordered list of links to different languages, that should be something you tell screen readers or search engine spiders when they're indexing your site.

Obviously it won't (or needn't) have any effect on the typical presentation or functionality of that menu, so the question is one of whether SEO and accessibility best practices are something you're concerned about.

回答7:

Tags are not only for presentation (which can be deeply changed today, anyway) but also for meaning. You can almost (?) do a complete Web page with only div and span, for example, but it doesn't mean it is a good idea...

You mention HTML5: they went great lengths to add several tags with similar rendering, but very different semantical meaning.
As written above, this helps screen readers: they will read differently your coding, perhaps trying to read it as a whole sentence, while they will read a real list with proper tone and pauses.
But it might also help web spider (think "Google", but not only) to better grasp the structure of your page and better index the most important parts.

回答8:

People use <ul> unsorted list and <li> list item to group items together. Why would you group html tags together....This enables developers to apply formatting using css classes to one group ...instead of each element.