Вы здесь: Главная » HTML » Списки в HTML

Списки в HTML

В HTML существует 3 вида списков:

  1. списки определений;
  2. нумерованные (упорядоченные) списки;
  3. маркированные (неупорядоченные) списки.

Рассмотрим их подробнее.

Списки определений

Списки определений нужны в тех сайтах, которые посвящены, как правило, обучению. Например, отличный сайт webref.ru использует списки определений для указания атрибутов тегов или вариантов свойств.

Создается список определений с помощью 3-х тегов:

  • dl - definition list - основной, или родительский тег;
  • dt - definition ternmin - вложенный тег;
  • dd - definition description - вложенный тег.

Код списка выглядит так:

Для примера используем определения тегов этого списка:

Что получилось:


Обратите внимание, что элемент dd имеет смещение от левого края окна браузера на 40px вправо. За счет этого определение визуально отличается от термина и привлекает к себе внимание.

Список определений хорошо форматировать с помощью css. Т.к. вряд ли на сайте будет много вариантов таких списков, имеет смысл использовать просто селектор тега, не прибегая ни к использованию классов, ни  id. Например, наш список можно отформатировать так:

Смотрим, что получилось на втором примере:

Нумерованный список

Нумерованный список еще называют упорядоченным от его английского названия - ordered list. Собственно, это словосочетание и дало название тега - <ol>. Внутри тега <ol> может находится произвольное количество тегов <li>с элементами списка</li>:

По умолчанию списки нумеруются арабскими, или десятичными цифрами: 1, 2, 3, 4 и т.д. Но это можно изменить как для всего списка (тег <ol>), так и для отдельного элемента списка (тег <li>), добавив к ним атрибут type="A", например:

Атрибут type может иметь следующие значения:

  • type="A" - прописные латинские цифры;
  • type="a" - строчные латинские цифры;
  • type="I" - прописные римские цифры;
  • type="i" - строчные римские цифры;
  • type="1" - арабские цифры (значение по умолчанию, можно не указывать).

Попробуем добавить к элементам <li> атрибут type с разными значениями:

Вот как будет выглядеть:

Не особо красиво, не так ли?

На самом деле сейчас атрибут type устарел, поэтому используют его крайне редко. Вдумайтесь сами, как часто бывает необходимость в создании списков, скажем, с римской нумерацией? Кроме того, есть возможность задать различные виды нумерации в css.

Атрибут reversed позволяет "перевернуть" нумерацию списка:

Для упорядоченного списка можно также добавить атрибут start="число". Под числом подразумевается номер начального элемента списка, с которого нужно начать нумерацию. Может быть использован, например, в описании действий в инструкции или уроке, когда это описание нужно разорвать иллюстрацией (одной или несколькими).

Для отдельного элемента <li> можно указать атрибут value="число", чтобы именно с этого номера начиналась нумерация внутри списка.

Маркированный список

Маркированный список еще называется неупорядоченным (unordered list), т.к. строгая нумерация в нем не предусмотрена. Зато есть 3 типа маркеров, определяемых в атрибуте type, хотя он на данный момент уже устарел и заменяется css-стилями:

  1. disc - темный кружок (значение по умолчанию, можно не указывать);
  2. circle - пустой кружок;
  3. square - темный квадрат.

Определяется список родительским элементом <ul> и множеством дочерних элементов <li>. Очень похож в этом на нумерованный список:

По умолчанию выводится с черными кружочками и сдвигом вправо на 40px.

Для того чтобы вывести списки разных типов, пока что используем атрибут type:

В этом примере заголовки сдвинуты на 40px вправо за счет margin-left, поэтому находятся на одном уровне с текстом в пунктах списка по отношению к левому краю браузера.

CSS:

 

4 комментария

  1. Не подскажете, как в дважды или трижды вложенном ul-списке раскрасить самый внутренний одними css-стилями, не редактируя исходный html-документ?

    • Используйте контекстные селекторы:
      ul ul ul {
      color: black;
      padding-left: 10px;
      list-style-type: disk;
      }
      Эти правила будут применены к самому вложенному ul, т.к. контекстный селектор читается справа налево.

  2. Спасибо за публикацию, очень правильно все написано!

  3. Часто ли используется форматирование списков? Это вроде не такая уж важная часть страницы?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *