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

маркированный список<ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список<ol> — каждый элемент списка <li> отмечается цифрой,
список определений<dl> — состоит из пар термин <dt><dd> определение.

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

Создание HTML-списков

  • Содержание:
  • 1. Маркированный список <ul>
  • 2. Нумерованный список <ol>
  • 3. Список определений <dl>
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ul>
unordered list
Рис. 1. Маркированный список

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

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

 

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

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

Для тега <ol> доступны следующие атрибуты:


Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ol>
ordered list
Рис. 2. Нумерованный список

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

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}  

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>   <dt>Режиссер:</dt>   <dd>Петр Точилин</dd>   <dt>В ролях:</dt>   <dd>Андрей Гайдулян</dd>   <dd>Алексей Гаврилов</dd>   <dd>Виталий Гогунский</dd>   <dd>Мария Кожевникова</dd>  </dl>
dl
Рис. 3. Список определений

4. Вложенный список

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

<ul>   <li>Пункт 1.</li>   <li>Пункт 2.   <ul>   <li>Подпункт 2.1.</li>   <li>Подпункт 2.2.    <ul>   <li>Подпункт 2.2.1.</li>   <li>Подпункт 2.2.2.</li>   </ul>   </li>    <li>Подпункт 2.3.</li>   </ul>   </li>   <li>Пункт 3.</li>  </ul>
ul ul ul
Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

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

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

 

ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
numeric list
Рис. 5. Многоуровневый нумерованный список

Что такое списки в HTML, какие они бывают

Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.

Какие бывают списки?

  • Нумерованный список;
  • Маркированный список (не нумерованный);
  • Многоуровневый список;
  • Список определений;
  • Выпадающий список.

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

Обратите внимание, список это не несогласованный набор словосочетаний-огрызков, отвечающих на разные вопросы обобщающего текста (которого как раз и нет в данном случае).

Пример:

неправильный список

Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.

Пример:

правильные списки

Разница очень заметна, не так ли? Правильный список такой, что легко «складывается» в предложение с простым перечислением однородных членов.

Где применяются списки?

  1. Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
  2. Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
  3. Многоуровневые списки используются для детализации информации отдельных элементов;
  4. Список определений в HTML используется при необходимости форматирования словаря.

HTML-практикум ч.1: как сделать упорядоченный нумерованный список

Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).

Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.

Покажу на примере. Код:

Результат:

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

По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».

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

Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:

выбор type для оформления нумерованного списка

TYPE может принимать значения:

  • «A» — для нумерации A, B..
  • «a» — для нумерации a, b..
  • «I» — для нумерации I, II..
  • «i» — для нумерации i, ii..
  • «1» — для нумерации 1. 2. и далее по порядку.

Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.

Внимание! Использование атрибута value сбивает нумерацию и, если нужно, его приходится использовать дважды.

Пример кода:

Результат:

произвольная нумерация нумерованного списка

HTML-практикум ч.2: маркированный список

Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).

Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.

По умолчанию маркированные элементы списка отображаются в виде черных кружочков.

Код:

Результат:


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

Вы также можете выставить для элементов <li> атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:

маркированный список с кружками, окружностями и квадратами

Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу <ul>. Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».

Код:

Результат:

маркированный список с элементами выделенными незакрашенными кружочками

HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров

Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».

Код:

Результат:

не упорядоченный не нумерованный список

HTML-практикум ч.4: вложенный многоуровневый древовидный список

Особенность создания многоуровнего списка с вложенными списками заключается не только в его древовидности, но и в том, что ваш список может быть комплексным. То есть сочетать в себе, как маркированные, так и нумерованные элементы вместе. Древовидные вложенные списки часто можно встретить на Википедии, в разделе где показывается содержание страницы:

многоуровневый древовидный вложенный список

Многоуровневый список получается в результате того, что мы как бы вкладываем один список в тело другого. Далее я покажу вам как это делается на примере готового HTML кода.

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

Я сделаю для вас один полноценный пример, чтобы наглядно показать, что и как.

Код:

Результат:

многоуровневый древовидный список с разным оформлением вложенных элементов

HTML-практикум ч.5: как сделать список определений

Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.

  • <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
  • <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
  • <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.

Такой список по умолчанию получается многоуровневым и древовидным.

Пример кода:

Результат:

список определений и терминов в html

Итог

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

Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».

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

Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.

Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.

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

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector