Маркированные и нумерованные списки в HTML: теоретические основы

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

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

Нумерованный список в HTML используется при перечислении заранее известного количества пунктов, и обосабливаются они друг от друга цифрами. Часто приводится их количество в предшествующем списку предложении. Пример: «Над профессиональным сайтом работают три вида специалистов:

  1. Веб-дизайнер.
  2. Специалист по контенту.
  3. Веб-программист.»
  • Ч. Муссиано;
  • Б. Хеник;
  • Н. Комолова;
  • Е. Полонская».

Следовать этому правилу необходимо в большинстве случаев, но есть и исключения, когда оно противоречит дизайну создаваемого сайта или того требует контекст.

Вид маркера

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

  • disc — маркеры в виде закрашенного кружка;
  • circle — маркеры в виде незакрашенного кружка;
  • square — квадратные маркеры.

Пример 1. Изменение вида маркера

Списки

  • Сепульки
  • Сепулькарии
  • Сепуление

В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к

  • не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
  • добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

    Пример 2. Использование::before

    Списки

    • Сепульки
    • Сепулькарии
    • Сепуление

    Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.

    Рис. 2. Произвольные маркеры в списке

    Вид маркера

    Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

    Рис. 3. Выбор символа в LibreOffice

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

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

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

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

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

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

    Для нумерованных указываем алфавит или тип цифр, а для остальных случаев — тип маркера.

    Если использовать специальный HTML-тег, нумерованный список может стать любым, каким вы хотите.

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

    Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.

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

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

    Для нумерованных списков нужно использовать следующие варианты:

    • 1 — арабские цифры;
    • A — заглавные ;
    • a — строчные латинские буквы;
    • I — заглавные римские цифры;
    • i — строчные римские цифры.
    Многоуровневый нумерованный список HTML

    По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type=»1″.

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

    Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.

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

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

    Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.

    У элемента UL есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:

    circle – создает маркер в виде круга, белого внутри;

    square – создает маркер в виде квадрата;

    disc – создает маркер в виде круга, закрашенного черным цветом.

    Маркер можно выбирать любой, на ваш взгляд наиболее соответствующий виду страницы.

    В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.

    Листинг 2.5. Маркированные списки

    <html

    <head>

    <h2>Списки</h2>

    <body>

    <ul type=»circle»>

    <li>Венера</li>

    <li>Земля</li>

    <li>Юпитер</li>

    <li>Марс</li>

    </ul>

    <ul compact type=»square» >

    <li>Венера</li>

    <li>Земля</li>

    <li>Юпитер</li>

    <li>Марс</li>

    </ul>

    <ul compact type=»disc» >

    <li>Венера</li>

    <li>Земля</li>

    <li>Юпитер</li>

    <li>Марс</li>

    </ul>

    </body>

    </html>

    Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.

    Рис. 2.5. Маркированные списки

    При создании маркированных списков с помощью элемента LI можно задать вид маркера отдельно для каждого пункта списка.

    В листинге 2.6 приведен пример создания списка с разными маркерами для различных пунктов.

    Листинг 2.6. Список с разными маркерами

    <html>

    <head>

    <h2>Списки</h2>

    <body>

    <ul>

    <li type=»circle»>Земля</li>

    <li type=»circle»>Марс</li>

    <li type=»square»>Солнце</li>

    <li type=»circle»>Венера</li>

    <li type=»disc»>Луна</li>

    </ul>

    </body>

    </html>

    Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.

    Рис. 2.6. Список с разными маркерами

    В примере различные маркеры отмечают объекты разных типов.

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

    В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.

    В листинге 2.7 представлен пример создания списка с графическими маркерами.

    Листинг 2.7. Список с графическими маркерами

    <html>

    <head>

    <h2>Списки</h2>

    <body>

    <ul>

    <img src=»» />Венера<br />

    <img src=»» />Марс<br />

    <img src=»» />Земля<br />

    </ul>

    </body>

    </html>

    Результат обработки кода из листинга 2.7 показан на рис. 2.7.

    Рис. 2.7. Список с графическими маркерами

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

    Маркированные списки

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

      (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега
    • . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег
        имеет следующий синтаксис:
        • Первый пункт
        • Второй пункт
        • Третий пункт

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

        Внутри тега

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

    Вывод

    Динамическая вставка контента с помощью псевдоэлемента before позволяет избежать использования дополнительной картинки и, соответственно, несколько уменьшить нагрузку на сервер. Применение приема ограничено видом маркера и набором адекватных спецсимволов, но для списков в контентной области сайта, где оформление бывает скромным это хороший вариант.

    Связка before+first-child дает возможность избавиться от лишних классов и элементов при верстке «хлебных крошек» и некоторых видов меню.

    Читайте также:  Как включить встроенную веб камеру на ноутбуке lenovo