Списки в HTML

Содержание

• Неупорядоченный список
• Упорядоченный список
• Вложенные списки
• Список описаний

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

Неупорядоченный список размечается тегом <ul> (unordered list).

Его используют, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, списка покупок и т. п.

Непосредственными дочерними элементами тега <ul> обычно должны быть теги <li>, которые обозначают элементы списка, однако стандарт допускает и некоторые вспомогательные элементы. Пунктов может быть неограниченное количество. Пустой список <ul></ul> технически допустим, но, как правило, не имеет смысла.

Пример: список продуктов.

<ul>
    <li>Сахар</li>
    <li>Гречка</li>
    <li>Яйца</li>
    <li>Сыр</li>
</ul>

Внешний вид маркеров

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

Значения:

• none — убирает маркеры;
• square — квадратные маркеры.

<ul class="none">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul class="square">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

ul.none {
    list-style: none;
}

ul.square {
    list-style: square;
}

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

Упорядоченный список размечается тегом <ol> (ordered list).

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

Пункты упорядоченного списка также размечаются тегом <li>. Пример: расписание уроков:

<ol>
    <li>Алгебра</li>
    <li>Русский язык</li>
    <li>Физика</li>
    <li>Биология</li>
    <li>Черчение</li>
</ol>

По умолчанию браузер отображает перед каждым элементом <li> десятичный номер.

Атрибуты

start — стартовое число

По умолчанию нумерация пунктов начинается с единицы, а с помощью start можно поменять это стартовое число.

<ol start="3">
    <li>так</li>
    <li>сяк</li>
</ol>

Нумерация пунктов списка может быть также отрицательной. Пример: нумерация этажей.

<ol start="-1">
    <li>Парковка</li>
    <li>Холл</li>
    <li>Офисы</li>
</ol>

reversed — направление нумерации

Атрибут reversed меняет направление нумерации на противоположное. Этот атрибут не требует значения.

<ol reversed>
    <li>три</li>
    <li>два</li>
    <li>раз</li>
</ol>

Браузер посчитает количество элементов в списке и начнет отсчет с этого значения. В данном случае с 3.

Можно комбинировать атрибуты:

<ol start="5" reversed>
    <li>три</li>
    <li>два</li>
    <li>раз</li>
</ol>

В данном примере отсчет начнется от пяти.

type — тип нумерации

С помощью атрибута type вместо обычных арабских цифр можно задавать различные форматы нумерации. Возможные значения атрибута:

• 1: десятичное число;
• a: буквы латинского алфавита в нижнем регистре;
• A: буквы латинского алфавита в верхнем регистре;
• i: римские цифры в нижнем регистре;
• I: римские цифры в верхнем регистре.

<ol type="I">
    <li>Хранители</li>
    <li>Две крепости</li>
    <li>Возвращение государя</li>
</ol>

Вложенные списки

Теги <ol> и <ul> можно вкладывать друг в друга и создавать многоуровневые списки. Стандарт HTML не устанавливает фиксированного максимального количества уровней вложенности. Однако следует помнить, что слишком глубокие списки ухудшают читаемость.

Сначала нужно создать список первого уровня, а затем между тегами <li> и </li> этого списка добавить ещё один список.

<ol type="I">
  <li>Хранители
    <ol>
      <li>Долгожданное угощение</li>
      <li>Тень прошлого</li>
      <li>Дорога втроем</li>
      <li>...</li>
    </ol>
  </li>
  <li>Две крепости
      <ol>
          <li>Отплытие Боромира</li>
          <li>Конники Ристании</li>
          <li>Урукхай</li>
          <li>...</li>
      </ol>
  </li>
  <li>Возвращение государя
      <ol>
        <li>Минас-Тирит</li>
        <li>Шествие серой дружины</li>
        <li>Войсковой сбор</li>
        <li>...</li> 
      </ol>
  </li>
</ol>

Вложенный список необходимо размещать внутри элемента <li>.

Список описаний

Список описаний размечается тегом <dl> (description list).

Список описаний удобен для разметки вопросов-ответов, наименований и определений, категорий и тем.

• Термин задается тегом <dt> (description term);
• определение задается тегом <dd> (description definition);
• оба этих тега пишутся внутри <dl>.

Каждый список <dl> может содержать один или несколько терминов и одно или несколько описаний для каждого термина.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd>Язык для оформления HTML-документов</dd>
</dl>

По умолчанию браузер добавляет небольшой отступ слева от определений.