Interested in a few questions about why and when to use lists?

  1. Let's take as a basis a simple menu, for which the li list is needed here, if you can do with div > a , you get a structure 1 level less nested. Maybe there is some deeper meaning?

 <ul class="nav"> <li class="nav__item item"> <a class="item__link">Пункт меню</a> </li> <li class="nav__item item"> <a class="item__link">Пункт меню</a> </li> <li class="nav__item item"> <a class="item__link">Пункт меню</a> </li> </ul> 

 <div class="nav"> <a class="nav__item">Пункт меню</a> <a class="nav__item">Пункт меню</a> <a class="nav__item">Пункт меню</a> </div>

  1. Suppose you need to use lists and for this you have found a reasonable argument, then the next question. For example, there is a cap of 3 blocks: a logo, a block with contacts 1, a block with contacts 2. ul.header > li.logo, li.contacts-1, li.contacts-2 you also use ul.header > li.logo, li.contacts-1, li.contacts-2 ? Wouldn't it be wise to use div.header (или просто header) > div.logo, div.contacts-1, div.contacts-2 ?
  • Summary of answers: because semantics. - andreymal

2 answers 2

what is the purpose of the li list here, if div > a can be avoided, the structure is 1 level less nested.

Firstly, search engines will understand that this is not simple text, and there will be текст до меню Пункт менюПункт менюПункт меню текст после меню in the search results, such as текст до меню Пункт менюПункт менюПункт меню текст после меню .

Secondly, the list markup will be a great service to users of screen speakers, since in this case each menu item is verbally separated (which is very important in the absence of any punctuation between your <a> ).

Thirdly, your menu will be adequately displayed even if the loading of CSS styles fails, or there is a complete lack of support for them (text browsers like lynx are quite popular until now).

  • Useful Information (+) - Arthur
  • @Arhad agrees with Arthur that this is useful information, but after all, some have minus. I put a plus for compensation (+) - Alexandr_TT

1) If the list is suitable, then it is better to use it. This will facilitate the understanding of the code in the future and allow you to clearly select a set of similar elements.

It is the same type.

2) Therefore, the entire Header should not be wrapped in a list. It is better to create 2 lists for contacts-1 and for contacts-2:

 div.header > div.logo div.header > ul.contacts-1 div.header > ul.contacts-2

Also, do not wrap a large amount of layout in the list. Lists should be small and informative. List - menu, list - users, list - links in footer.

For elements of the same type as “posts” or “sidebar sections” it is better to use divs.

A very important aspect is to observe the nesting indents. With him, no lists are not terrible.

  • those. There is no "scientific" justification for using lists, just personal preferences? I personally do what I need to do through lists through lists, they brought me up like this :), but just wondered about the "scientific" nature of this approach ... - Mike_Ro