Why should I use UL/LI in my HTML?

Question

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

  

        

                      

              相关标签:
       
      

Answer 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.

Answer 2

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.

Answer 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.

Answer 4

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.

Answer 5

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.

Answer 6

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 :(