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

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

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

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

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

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

Ответы

Ответ 1

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

Помните, что HTML предназначен для разметки/содержимого (что такое текст? абзац? оберните его в тег p), 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 и атрибуты свойств добавлен к существующим элементам. [14]

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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