Почему в списках меню принято использовать структуру UL, LI?

Question

Я новичок в HTML.Когда я начал читать документацию о списках, я заметил, что везде используется структура <ul>, <li>, даже для создания очень простых списков.

Но для меня наиболее удобно использовать только элементы <a> с CSS:

display: block;
/* and/or */
float: left;

Итак, зачем использовать <ul>, <li> вместо <a>?

Большое спасибо.

Answer 1

Потому что конструктивно они являются наиболее подходящими элементами для этой цели.Также помогает пользователям программ чтения с экрана с точки зрения правильного определения элементов страницы.

Помните, что HTML предназначен для разметки / содержимого (что такое этот текст? Абзац? Оберните его в тег ap), CSS - для стиля, JS - для поведения.

Вы можете иметь тысячиякорей на вашей веб-странице, но что, если вы хотите стилизовать якоря, вложенные в перечисленные элементы, в отличие от других якорей?

<ul>
<li><a href="#">blah</a></li>
</ul>

<a href="#">sfl</a>

Если вы все сделали правильно, ваш css будет тривиально реализовать

a { }
ul li a { }

В противном случае вам придется разбрасывать классы вокруг якорей, и это будет грязно и неструктурно.

Что касается SEO - я полагаю, что в прошлом семантически размеченный код не имел большого значения, но в настоящее время со спецификациями, такими как RDF, элементы HTML 5, веб становится все более и более семантическим, поэтомувыгодно быть настолько семантическим, насколько это возможно.

В 2010 году Google указал три формы структурированных метаданных, которые их системы будут использовать для поиска структурированного семантического контента на веб-страницах.Такая информация, когда она связана с отзывами, профилями людей, списками компаний и событиями, будет использоваться Google для улучшения «фрагмента» или короткого фрагмента цитируемого текста, который отображается, когда страница появляется в результатах поиска.Google указывает, что эти данные могут быть предоставлены с использованием микроданных, микроформатов или RDFa. [13]Микроданные указываются внутри itemtype, а атрибуты itemprop добавляются к существующим элементам HTML;ключевые слова микроформатов добавляются в атрибуты класса, как обсуждалось выше;и RDFa опирается на атрибуты rel, typeof и property, добавленные к существующим элементам. [14]

Answer 2

Поскольку ваша разметка должна быть семантической, а не только для демонстрации.

Любой или кто-либо, кто читает ваш документ, может сразу сказать, что раздел, помеченный тегами <ul><li>...</li></ul>, является списком.

CSS не описывает что такое что-то, только то, как это должно быть отображено. В идеале вы должны разметить документ так, чтобы описать что такое каждая часть, а затем использовать CSS для правильной визуализации этих частей.

Answer 3

Поскольку UL, LI и OL - это элементы HTML, созданные с определенной целью быть списками. Используя правильную разметку, вы добавляете больше информации к своему контенту, любой автоматизированный инструмент, который видит ваш код, будет знать, что это списки, и сможет действовать соответствующим образом.

Если вам нужны ссылки внутри элемента списка, вы можете поместить элемент A, вложенный в LI:

<ul>
    <li><a href="example.com">Example</a></li>
</ul>

Answer 4

Для тех, кто недостаточно убежден в семантике, я думаю, что было бы справедливо упомянуть, что использование тега списка может быть расширено для включения навигации второго уровня.Затем добавьте немного CSS (и немного JavaScript для IE) и чушь ... у вас есть superfish меню.