Списки в HTML

список — ul

Давайте поупражняемся в создании различных списков при помощи HTML. Будем составлять списки, нумеровать и маркировать их, делать вложенность. Как обычно будут и примеры, и скриншоты.

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

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

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

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

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

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

Пример:

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

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

Пример:

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

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

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

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

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

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

Соответственно, <li></li> — начало и конец элемента списка, а <ol></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 для оформления нумерованного списка

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

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

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

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

Пример кода:

<ol start="17">
    <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> — начало и конец самого маркированного списка.

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

Код:

<ul>
    <li>Элемент №1 маркированного списка;</li>
    <li>Элемент №2 маркированного списка;</li>
    <li>Элемент №3 маркированного списка.</li>
</ul>

Результат:

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

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

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

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

Код:

<ul style="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;».

Код:

<ul style="list-style-type: none;">
    <li>Элемент №1 неупорядоченного ненумерованного списка;</li>
    <li>Элемент №2 неупорядоченного ненумерованного списка;</li>
    <li>Элемент №3 неупорядоченного ненумерованного списка.</li>
</ul>

Результат:

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

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

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

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

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

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

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

Код:

<ul style="display: block; list-style-type: none;">

    <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) — обозначает начало и конец одного определения/пояснения для одного термина.

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

Пример кода:

<dl>
    <dt>Термин №1</dt>
        <dd>Определение №1 для первого термина</dd>
        <dd>Определение №2 для первого термина</dd>
    <dt>Термин №2</dt>
        <dd>Определение №1 для второго термина</dd>
        <dd>Определение №2 для второго термина</dd>
</dl>

Результат:

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

Итог

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

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

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

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

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

Также читайте
AdminVPS
AdminVPS – надёжный хостинг, гарантирующий высокую скорость работы сайта

Надёжность является решающим критерием при выборе хостинга для своего сайта. Стабильная работа хостинг-провайдера обеспечит высокую …

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

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