Когда я буду использовать элемент списка в HTML? - PullRequest
Новая
       2

Когда я буду использовать элемент списка в HTML?

2 голосов
/ 11 июня 2011

Я никогда не использовал список раньше. Я создал сайт с более чем 30 000 LOC и никогда не использовал ни одного элемента списка. Но когда я смотрю на исходный код других, скажем, Twitter, они все время используют список. В чем преимущество использования списочных элементов? Большую часть времени я могу достичь того же результата с div-элементами в плане компоновки

Ответы [ 5 ]

2 голосов
/ 11 июня 2011

Семантика.Элементы в списке, как правило, связаны по значению, а не только по макету.

1 голос
/ 11 июня 2011

Вы должны использовать списки, когда они семантически лучший выбор. При создании HTML-кода задайте себе следующий вопрос:

Составляю ли я список вещей?

Если вы ответили «да», вы хотите использовать элемент списка или, если это список с двумя или более столбцами соответствующей информации, таблицу.

Для сравнения, список элементов, созданных с использованием div, не имеет значения. Возьмите следующий пример списка:

  1. Колбаса
  2. Бэкон
  3. Свинина
  4. Гаммон

Это список продуктов из свинины, и обычно ваш HTML должен выглядеть следующим образом: 

<ol>
  <li>Sausages</li>
  <li>Bacon</li>
  <li>Pork</li>
  <li>Gammon</li>
</ol>

Это говорит нам и браузеру, что все элементы в этом списке связаны . Все они имеют общий атрибут (в данном случае это свиное мясо). Однако если вы используете этот код: 

<div>Sausages</div>
<div>Bacon</div>
<div>Pork</div>
<div>Gammon</div>

Это ничего не говорит нам (и браузеру) о контенте, только о том, что они существуют на странице. С точки зрения стиля (то есть CSS), это не имеет большого значения, и может даже облегчить жизнь, но это (a) злоупотребление элементом div (см .: Divitis ), и (б) плохо для доступности, так как программы чтения с экрана и другое подобное программное обеспечение не будет знать, что данные связаны. Ваша поисковая оптимизация также может пострадать (теоретически).

Имейте в виду, что это не должен быть просто список текстовых данных, как указано выше. Список навигационных ссылок: , все еще список , и вы должны пометить его как таковой. Например: 

<ul class="site-navigation">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a href="login.html">Log in</a></li>
</ul>
1 голос
/ 11 июня 2011

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

0 голосов
/ 12 июня 2011

Я с Джайлсом на этом, но хотел немного расширить.Список элементов содержит семантическое значение.Все, что вы перечисляете на странице, скорее всего, принадлежит списку.Примеры:

  • Продукты
  • Элементы навигационного меню
  • Обмен ссылками (например, Facebook, Twitter, LinkdIn, reddit и т. Д.)
  • Этот списоксам входит в список:)

Кроме того, представьте себе сценарий, в котором стили не применяются или применяются по-другому (очень часто встречается в мобильных браузерах, особенно в тех, которые не установлены на новейших / продвинутых смартфонах), или есликто-то, использующий Firefox, переходит в View -> Page Style и выбирает No Style для.Вы все еще хотите, чтобы ваша страница имела смысл.Если вы перечисляете элементы на странице, вы все равно хотите, чтобы они отображались как некий список, а не просто набор DIV.DIVs не имеют семантического значения, кроме как организовывать вещи в отдельные контейнеры и управлять компоновкой.

0 голосов
/ 11 июня 2011

Используется в основном для создания меню, но те же результаты могут быть легко достигнуты с помощью элементов div.Управлять вашим меню легче, если это простой список, и я думаю, что поисковые системы также предпочитают их

...