Я новичок в HTML. Когда я начал читать документацию о списках, я заметил, что везде используется структура <ul>, <li>, даже для создания очень простых списков.
Но для меня наиболее удобно использовать только <a> элементы с CSS:
display: block;
/* and/or */
float: left;
Итак, зачем использовать <ul>, <li> вместо просто <a>?
Большое спасибо.
Потому что структурно они являются наиболее подходящими элементами для этой цели. Также помогает пользователям экранного считывателя с точки зрения правильного указания элементов страницы.
Помните, что 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]
Поскольку ваша разметка предполагается семантической, а не только для целей показа.
Любой или что-либо, читающее ваш документ, может сразу сказать, что раздел с тегами <ul><li>...</li></ul> - это список.
CSS не описывает, что-то есть, только то, как оно должно отображаться. В идеале вы должны пометить свой документ, чтобы описать, что каждая часть, а затем использовать CSS для рендеринга этих частей соответственно.
Поскольку UL, LI и OL - это HTML-элементы, созданные с конкретной целью списка. Используя надлежащую разметку, вы добавляете больше информации в свой контент, любой автоматизированный инструмент, который видит ваш код, будет знать, что это списки и иметь возможность действовать соответствующим образом.
Если вам нужны ссылки внутри элемента списка, вы можете поместить элемент A, вложенный внутри LI:
<ul>
<li><a href="example.com">Example</a></li>
</ul>
Для тех, кто недостаточно убежден в семантике, я считаю, что его справедливо также отметить, что использование тега списка может быть расширено, чтобы включить навигацию второго уровня. Затем добавьте некоторые css (и некоторые javascript для IE) и bosh... у вас есть меню superfish.