Geek Answers Handbook

Why should I use UL / LI in my HTML?

I have the following structure that seems really nice to 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 / LI) if only A items shown in blocks do the job? Is it really useful to use lists in this case? I always love so, and it seems to me that it is so good.

+4
source share
7 answers

This is more semantically correct.

What you have is an unordered list of languages. You must use an unordered list of elements ( UL element with LI elements) to be semantically correct.

It also helps screen readers and other technologies that depend on the right semantics to work.

+9
source

There are (at least) two good reasons to use lists. Using lists can help give an idea of ​​the structure of your site, which is good in terms of SEO, but also if people use either their own CSS or screen readers for reasons of accessibility. The second and slightly related one is quite useful when it comes to creating style sheets. You do not need to come up with your own way of nesting elements. Just use the lists and go from there. Then you can focus on choosing the right style sheet by providing different styles for different levels of the hierarchy, first, last, odd, or even list items.

Content from this answer.

+2
source

To add to the Oded answer, in particular, the reason you want to be semantically correct is intended for all Internet users who do not use a normal browser. Consider, for example, a blind user using a screen reader or some web crawler.

+2
source

This is recommended to make your markup semantically descriptive. Since the dropdown menu is essentially an unordered list of links to different languages, this should be what you tell screen readers or search engine spiders when they index your site.

Obviously, this will not affect (or not necessarily) the typical presentation or functionality of this menu, so the question is whether SEO and accessibility best practices are something that bothers you.

+2
source

Also because without CSS, your menu does inline as a suggestion ...

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

... and not a nicely formatted (albeit rather boring looking) list.

+2
source

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

+1
source

Tags are not only for presentation (which can be deeply modified today, one way or another), but also for meaning. You can almost (?) Make a complete web page with just div and span , but that doesn't mean it's a good idea ...

You mentioned HTML5: they put great lengths to add some tags with similar rendering, but very different semantic meanings.
As written above, this helps screen readers: they will read your coding in different ways, perhaps trying to read it as a whole sentence, while they will read a real list with the correct tone and pauses.
But it can also help the web spider (think "Google", but not only) to better understand the structure of your page and better index the most important parts.

+1
source

More articles:


All Articles