Вы здесь: Главная » 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. Часто ли используется форматирование списков? Это вроде не такая уж важная часть страницы?

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

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

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

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

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