Списки

Списки в HTML играют довольно важную роль. Они позволяют упорядочить какие-то данные и отобразить их наилучшим образом, правильно пронумеровать и т.д. Несмотря на их большое значение, списков в HTML всего три, а основных — два.

<ul>,<li>
<ul> — (с англ. unordered list — неупорядоченный список) это тег неупорядоченного (ненумерованного) списка. <li> — (с англ. list item — элемент списка) это пункт списка. Поскольку список невозможно рассматривать без <li>, мы сразу коснёмся и его. Итак, ненумерованный список представляет собой контейнер, в котором содержится один или несколько <li>:

                

                <p>Кто здесь лишний?</p>
<ul>
    <li>Апельсин</li>
    <li>Яблоко</li>
    <li>Виноград</li>
    <li>Ананас</li>
</ul>

В результате мы увидим то, что было в коде изначально, но ещё добавился «::marker». Это псевдоэлемент (о них пойдёт разговор в уроках по CSS), он добавляется в некоторых случаях в разметку и не является ни изображением, ни текстом, хотя и поддаётся правилам форматирования текста. Этот маркер будет добавляться по умолчанию для всех пунктов списка <li>, помещённых в <ul>. Тип маркера мы можем изменять при помощи CSS-свойства. Также обратите внимание на появившиеся отступы сверху и снизу от списка, а также внутренний отступ (показан зелёным на скриншоте). Все эти отступы определяются стилями браузера по умолчанию.

Вложенные списки также допустимы:

                

                <p>Кто здесь лишний?</p>
<ul>
    <li>Апельсин</li>
    <li>Яблоко
        <ul>
            <li>Сорт Карамелька</li>
            <li>Сорт Богатырь</li>
        </ul>
    </li>
    <li>Виноград
        <ul>
            <li>Красный</li>
            <li>Белый</li>
            <li>Чёрный</li>
        </ul>
    </li>
    <li>Ананас</li>
</ul>

Вложенность списков может быть любой, ограничений тут нет. Тег принимает только глобальные атрибуты.

Тег <ul> имеет также одну особенность. Он получил распространение в качестве контейнера для меню. Для многих популярных CMS («движков» сайтов) характерна следующая предустановленная разметка меню:

                

                <nav class="menu">
    <ul class="menu-list">
        <li class="menu-item">
            <a href="#" class="menu-link">Главная</a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link">Услуги</a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link">О компании</a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link">Контакты</a>
        </li>
    </ul>
</nav>

С этой структурой меню вы ещё неоднократно встретитесь, когда будете работать с CMS. Она действительно хороша, поскольку содержит количество блоков-контейнеров, достаточное для создания большинства возможных дизайнов меню. Разумеется, возможно создание вложенного подменю:

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

Что касается <li>, то, несмотря на то, что именно CSS свойство для <ul> определяет тип маркера, сам маркер добавляется после <li>. Тег может иметь, помимо глобальных, один собственный атрибут:

value
— значением может быть только число, указывает на порядковый номер данного элемента списка:

                

                <ul>
    <li value="1">Красный</li>
    <li value="2">Оранжевый</li>
    <li value="3">Жёлтый</li>
</ul>

Данный атрибут выставляется разработчиком и не является автоматическим! Вместе с тем он не влияет на отображение списка <ul> в браузере и необходим только для работы JavaScript со списком.

<ol>
— (с англ. ordered list — упорядоченный список) необходим для описания упорядоченного (нумерованного) списка:

                

                <p>Список покупок:</p>
<ol>
    <li>Молоко</li>
    <li>Сосиски</li>
    <li>Хлеб</li>
</ol>

Мы видим всё совершенно аналогично тегу <ul> — те же отступы и тот же появившийся «::marker», единственное отличие — в самом этом маркере. Поскольку тег называется «упорядоченный список», маркеры в нём упорядочены в соответствии с порядком элементов в HTML-разметке. Первый пункт получил маркер 1, второй 2 и т.д. Эта нумерация проставляется автоматически браузером. Если вы поменяете местами «Сосиски» и «Молоко», цифры останутся на местах. Атрибуты тега:

reversed
— булев атрибут, позволяет переопределить индекс маркера, т.е. отсчёт 1,2,3… начнётся с конца списка:

                

                <p>Список покупок:</p>
<ol reversed>
    <li>Молоко</li>
    <li>Сосиски</li>
    <li>Хлеб</li>
</ol>

start
— по умолчанию нумерация в списке <ol> начинается с 1. Вы можете в данном атрибуте переопределить стартовое значение, указав число.

                

                <p>Список покупок:</p>
<ol start="3">
    <li>Молоко</li>
    <li>Сосиски</li>
    <li>Хлеб</li>
</ol>

type
— определяет тип нумерации, например вы можете выбрать римские цифры вместо привычных нам арабских. Доступные значения:
a — для строчных букв
A — для заглавных букв
i — для римских строчных цифр
I — для римских заглавных цифр
1 — для арабских цифр (по умолчанию)

                

                <p>Список покупок:</p>
<ol start="3" type="i">
    <li>Молоко</li>
    <li>Сосиски</li>
    <li>Хлеб</li>
</ol>

Указанный тип используется для всего списка, однако вы можете переопределить тип маркера, указав CSS-свойство «list-style» непосредственно тегу <li>. Как вы можете видеть, в браузере предусмотрено довольно много вариантов нумерации:

В коммерческой разработке предустановленные браузером маркеры для <ul> вроде закрашенных или незакрашенных кружков, квадратов и прочих используются крайне редко.
Как правило дизайнер изображает маркеры для списков каким-либо особенным, соответствующим стилю сайта образом. Поскольку стилизовать маркер при помощи CSS нельзя, разработчики скрывают
такие маркеры вообще и добавляют свои в качестве псевдоэлементов (об этом позже) или в качестве фонового изображения для <li>.

<dl>,<dt>,<dd>
— (с англ. definition list — список определений, description term — описываемый термин, description details — подробности описания) два вышеописанные списка являются основными, они используются почти всегда, когда нужно создать какой-либо список. Однако есть ещё и третий тег, использующийся для создания списка описаний — <dl>. Он используется вместе с тегом <dt> (определяемый элемент) и <dd> (определяемое описание). Понять проще всего будет на примере:

                

                <p>Школьные науки:</p>
<dl>
    <dt>Физика</dt>
    <dd>- наука о наиболее общих законах природы, о материи, её структуре, движении и правилах трансформации.</dd>

    <dt>Химия</dt>
    <dd>- наука, изучающая вещества, также их состав и строение, их свойства, зависящие от состава и строения, их превращения, ведущие к изменению состава — химические реакции, а также законы и закономерности, которым эти превращения подчиняются</dd>

    <dt>Биология</dt>
    <dd>- наука о живых существах и их взаимодействии со средой обитания.</dd>
</dl>

Размер <body> мы уменьшили для компактности примера. Как видите, каждое определение и его описание отображаются с новой строчки, описание <dd> имеет левый внешний отступ, это правило браузера. Вы не обязаны пользоваться именно парой <dt> + <dd>, вы можете использовать три определения и одно описание, и наоборот:

                

                <dl>
    <dt>Физика</dt>
    <dt>Химия</dt>
    <dt>Биология</dt>
    <dd>- естественные науки, изучаемые в школе</dd>
</dl>

                

                <dl>
    <dt>Биология</dt>
    <dd>- наука о живых существах и их взаимодействии со средой обитания.</dd>
    <dd>- входит в школьную программу</dd>
    <dd>- изучается учениками начиная с 5 класса</dd>
</dl>

У тега <dl> нет никаких особенностей, какие стоило бы учитывать при работе с ним. Этот тег является всего лишь дополнением к семантике вашего сайта, чтобы вы могли использовать в работе не только <ul> и <ol>.