Давайте поупражняемся в создании различных списков при помощи HTML. Будем составлять списки, нумеровать и маркировать их, делать вложенность. Как обычно будут и примеры, и скриншоты.
Что такое списки в HTML, какие они бывают
Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.
Какие бывают списки?
- Нумерованный список;
- Маркированный список (не нумерованный);
- Многоуровневый список;
- Список определений;
- Выпадающий список.
Нумерация помогает в тех случаях, когда нужно расположить однородные элементы списка в определенном порядке или упростить работу, добавив возможность дать ссылку на определенный пункт списка.
Обратите внимание, список это не несогласованный набор словосочетаний-огрызков, отвечающих на разные вопросы обобщающего текста (которого как раз и нет в данном случае).
Пример:
Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.
Пример:
Разница очень заметна, не так ли? Правильный список такой, что легко «складывается» в предложение с простым перечислением однородных членов.
Где применяются списки?
- Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
- Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
- Многоуровневые списки используются для детализации информации отдельных элементов;
- Список определений в HTML используется при необходимости форматирования словаря.
HTML-практикум ч.1: как сделать упорядоченный нумерованный список
Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).
Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.
Покажу на примере. Код:
<li>Элемент №1 нумерованного списка;</li>
<li>Элемент №2 нумерованного списка;</li>
<li>Элемент №3 нумерованного списка;</li>
</ol>
Результат:
По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».
Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:
TYPE может принимать значения:
- «A» — для нумерации A, B..
- «a» — для нумерации a, b..
- «I» — для нумерации I, II..
- «i» — для нумерации i, ii..
- «1» — для нумерации 1. 2. и далее по порядку.
Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.
Внимание! Использование атрибута value сбивает нумерацию и, если нужно, его приходится использовать дважды.
Пример кода:
<li>Элемент №1 нумерованного списка;</li>
<li value="289">Элемент №2 нумерованного списка;</li>
<li value="18">Элемент №3 нумерованного списка;</li>
<li>Элемент №4 нумерованного списка;</li>
</ol>
Результат:
HTML-практикум ч.2: маркированный список
Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).
Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.
По умолчанию маркированные элементы списка отображаются в виде черных кружочков.
Код:
<li>Элемент №1 маркированного списка;</li>
<li>Элемент №2 маркированного списка;</li>
<li>Элемент №3 маркированного списка.</li>
</ul>
Результат:
Вы также можете выставить для элементов <li> атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:
Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу <ul>. Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».
Код:
<li>Circle №1 маркированного списка;</li>
<li>Circle №2 маркированного списка;</li>
<li>Circle №3 маркированного списка;</li>
</ul>
Результат:
HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров
Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».
Код:
<li>Элемент №1 неупорядоченного ненумерованного списка;</li>
<li>Элемент №2 неупорядоченного ненумерованного списка;</li>
<li>Элемент №3 неупорядоченного ненумерованного списка.</li>
</ul>
Результат:
HTML-практикум ч.4: вложенный многоуровневый древовидный список
Особенность создания многоуровнего списка с вложенными списками заключается не только в его древовидности, но и в том, что ваш список может быть комплексным. То есть сочетать в себе, как маркированные, так и нумерованные элементы вместе. Древовидные вложенные списки часто можно встретить на Википедии, в разделе где показывается содержание страницы:
Многоуровневый список получается в результате того, что мы как бы вкладываем один список в тело другого. Далее я покажу вам как это делается на примере готового HTML кода.
Проблема только одна — не запутаться в коде. Решается она либо внимательностью, либо созданием отступов для себя: чтобы в HTML было твердо и четко все разложено по полочкам — где что находится.
Я сделаю для вас один полноценный пример, чтобы наглядно показать, что и как.
Код:
<li><a href="#00"><span>00</span></a></li>
<li><a href="#01"><span>01</span></a></li>
<li><a href="#02"><span>02</span></a></li>
<li><a href="#03"><span>03</span></a>
<ul>
<li><a href="#03.1"><span>03.1</span></a>
<ul>
<li><a href="#03.1.1"><span>03.1.1</span></a>
<ul style="list-style-type: disc;">
<li><a href="#03.1.1.1"><span>03.1.1.1</span></a></li>
<li><a href="#03.1.1.2"><span>03.1.1.2</span></a></li>
<li><a href="#03.1.1.3"><span>03.1.1.3</span></a></li>
</ul>
</li>
<li><a href="#03.1.2"><span>03.1.2</span></a>
<ol>
<li><a href="#03.1.2.1"><span>03.1.2.1</span></a></li>
<li><a href="#03.1.2.2"><span>03.1.2.2</span></a></li>
<li><a href="#03.1.2.3"><span>03.1.2.3</span></a></li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#04"><span>04</span></a></li>
<li><a href="#05"><span>05</span></a></li>
</ul>
Результат:
HTML-практикум ч.5: как сделать список определений
Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.
- <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
- <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
- <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.
Такой список по умолчанию получается многоуровневым и древовидным.
Пример кода:
<dt>Термин №1</dt>
<dd>Определение №1 для первого термина</dd>
<dd>Определение №2 для первого термина</dd>
<dt>Термин №2</dt>
<dd>Определение №1 для второго термина</dd>
<dd>Определение №2 для второго термина</dd>
</dl>
Результат:
Итог
Итак, в данной статье вы узнали, что списком можно назвать взаимосвязанные однородные контейнеры (состоящие из предложений или отдельных фраз), располагающиеся друг за другом и начинающиеся с цифр, маркеров или не имеющие обозначений.
Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».
В этой статье я привел достаточное количество примеров кода, а также скриншотов, чтобы вы доскональном могли ориентироваться в теме создания различных списков: нумерованных и ненумерованных, упорядоченных и неупорядоченных, маркированных и немаркированных (без маркеров), одно- и многоуровневых (вложенных и древовидных), а также списков определений.
Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.
Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.