HTML: Меню как UL вместо DIV?

Question

Недавно я создал меню для веб-страницы, где кнопки представляют собой элементы DIV. Я искал Google и вижу, что многие люди создают списки UL, и каждая кнопка является элементом LI. Какая польза от использования UL и LI вместо DIV? Это как-то лучше для SEO? Связано ли это с «семантической» разметкой? Любая веская причина переписать мое меню как UL?

Answer 1

Это более семантически правильный подход. Меню можно считать неупорядоченным списком (ul), и каждый элемент в качестве элемента списка (li).

Чрезмерное использование элементов div также известно как «делит», и его следует избегать, когда это возможно. (Что, конечно, не означает, что div элементов плохо сам по себе. Есть законные случаи использования для div с почти в каждой веб-странице.)

Там нет функциональной разницы в использовании более семантический звуком элементов, но это улучшает, упрощает чтение кода и позволяет создавать определения CSS с меньшими затратами.

Сравнить, например

div.menu { ..... } 
div.menu div.subitem { ..... } 
div.menu div.level2 div.subitem { ..... } 

к

ul { ..... } 
ul li { ..... } 
ul ul li { ..... } 

Известные примеры того, где div ы могут быть заменены на более подгоночных элементов:

• Как уже было сказано, меню: <ul><li>

• формы с этикетками: <fieldset><label>

• Заголовки <h1><h2> (только заголовки, а не полные площади заголовка хотя)