Списки HTML

Введение

Списки используются для объединения в группу связанных объектов информации, чтобы облегчить их ассоциирование друг с другом и чтение. В современной разработке Web списки являются основополагающими элементами, часто используемыми для навигации, а также обычного контента.

Списки хорошо подходят со структурной точки зрения, так как они помогают создать хорошо структурированный, более доступный, и простой в обслуживании документ. Они полезны также с чисто практических соображений — они предоставляют дополнительные элементы для соединения со стилями CSS для целого множества стилей оформления.

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

• Три типа списков
  • Неупорядоченные списки
  • Упорядоченные списки
    • Разметка упорядоченного списка
    • Начало упорядоченных списков с числа, отличного от 1
  • Списки определений
• Выбор типа списка
• Различие между списками HTML и текстом
• Вложенные списки
• Пошаговый пример
  • Разметка основной страницы
  • Добавление некоторых стилей
  • Страница рецептов
  • Разметка страницы рецептов
  • Оформление страницы рецептов
• Заключение
• Дополнительное чтение
• Контрольные вопросы

Три типа списков

В HTML имеется три типа списков:

• Неупорядоченный список - используется для объединения в группу множества связанных объектов без определенного порядка.
• Упорядоченный список - используется для объединения в группу множества связанных объектов в определенном порядке.
• Список определений - используется для вывода пар имя/значение, таких как термины и их определения, или время и события.

Каждый из них имеет определенное назначение - они не являются взаимозаменяемыми!

Неупорядоченные списки

Неупорядоченные списки, или маркированные списки, используются, когда множество объектов может быть размещено в любом порядке. Примером является список покупок:

• молоко
• хлеб
• сливочное масло
• кофейные зерна

Однако все эти объекты являются частью одного списка, можно разместить объекты в любом порядке и список будет по-прежнему иметь смысл:

• хлеб
• кофейные зерна
• молоко
• сливочное масло

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

Разметка неупорядоченного списка

Неупорядоченные списки используют одну пару тегов <ul></ul>, охватывающих множество пар тегов <li></li>:

<ul>
  <li>хлеб </li>
  <li>кофе в зернах </li>
  <li>молоко </li>
  <li>масло </li>
</ul>

Упорядоченные списки

Упорядоченные списки, или нумерованные списки, используются для вывода списка объектов, которые необходимо разместить в определенном порядке. Примером могут быть кулинарные инструкции по приготовлению, которые должны быть выполнены в определенном порядке рецепта:

1. Собрать ингредиенты
2. Смешать ингредиенты
3. Поместить ингредиенты в форму для выпечки
4. Выпекать в духовке в течение часа
5. Вынуть из духовки
6. Дать постоять десять минут
7. Подать

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

1. Собрать ингредиенты
2. Выпекать в духовке в течение часа
3. Вынуть из духовки
4. Подать
5. Поместить ингредиенты в форму для выпечки
6. Дать постоять десять минут
7. Смешать ингредиенты

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

• Буквы
  • Буквы ascii нижнего регистра (a, b, c…)
  • Буквы ascii верхнего регистра (A, B, C…)
  • Классические греческие буквы нижнего регистра: ( , , …)
• Числа
  • Десятичные числа (1, 2, 3…)
  • Десятичные числа с ведущим нулем (01, 02, 03…)
  • Римские числа в нижнем регистре (i, ii, iii…)
  • Римские числа в верхнем регистре (I, II, III…)
  • Традиционная грузинская нумерация (an, ban, gan…)
  • Традиционная армянская нумерация (mek, yerku, yerek…)

Здесь также можно использовать CSS для изменения стиля списков.

Разметка упорядоченного списка

Упорядоченные списки используют одну пару тегов <ol></ol>, охватывающих множество пар тегов <li></li>:

<ol>
  <li>Собрать ингредиенты</li>
  <li>Смешать ингредиенты</li>
  <li>Поместить ингредиенты в форму для выпечки </li>
  <li>Выпекать в духовке в течение часа </li>
  <li>Вынуть из духовки</li>
  <li>Дать постоять десять минут </li>
  <li>Подать</li>
</ol>

Начало упорядоченных списков с числа, отличного от 1

Можно создать упорядоченный список, нумерация которого начинается с числа отличного от 1 (или i, или I, и т.д.). Это делается с помощью атрибута start, который получает числовое значение, даже если используется CSS для изменения нумерации списка на алфавитную или римскую с помощью свойства list-style-type. Это будет полезно, если имеется единый список объектов, но вы хотите разбить список некоторыми примечаниями, или некоторой другой подходящей информацией. Например, можно было бы сделать это с предыдущим примером:

<ol>
  <li>Собрать ингредиенты </li>
  <li>Смешать ингредиенты </li>
  <li>Поместить ингредиенты в форму для выпечки </li>
</ol>

<p class="note">Прежде чем поместить ингредиенты в форму для выпечки, 
  нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, 
   чтобы быть готовым к следующему шагу </p>

<ol start="4">
  <li> Выпекать в духовке в течение часа </li>
  <li> Вынуть из духовки </li>
  <li> Дать постоять десять минут </li>
  <li> Подать </li>
</ol>

Это приводит к следующему результату:

1. Собрать ингредиенты
2. Смешать ингредиенты
3. Поместить ингредиенты в форму для выпечки
   Прежде чем поместить ингредиенты в форму для выпечки, нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, чтобы быть готовым к следующему шагу
4. Выпекать в духовке в течение часа
5. Вынуть из духовки
6. Дать постоять десять минут
7. Подать

Отметим, что этот атрибут является фактически исключенным в самой последней версии спецификации HTML, что означает, что страницы не пройдут валидацию при использовании строгого doctype. Это может показаться странным, так как этот атрибут имеет смысл, и нет эквивалента в CSS. Это показывает, что валидация HTML является идеальной целью для достижения, но не всегда абсолютно конечной целью. Кроме того, есть и еще один спасительный момент — атрибут start больше не является исключенным в спецификации HTML 5 (документ об отличиях HTML 5 от HTML 4 (http://www.w3.org/TR/2008/WD-html5-diff-20080122/) подтверждает это). Если вы хотите использовать такую возможность на строгой странице HTML 4, и она должна обязательно пройти валидацию, можно сделать это с помощью CSS Counters.