Маркированный список в HTML. Как создать его и настроить тип маркера?

маркированный список в html. как создать его и настроить тип маркера?

Создание маркированного списка

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

В HTML для создания маркированного списка используется элемент <ul>. Всё содержимое, предназначенное для вставки, должно быть добавлено в элементы <li>. Каждый элемент <li>, вставленный между открывающим тегом <ul> и закрывающим </ul>, будет отображен со специальной графической меткой, именуемой маркером. Созданный список имеет стилизацию по умолчанию. Во всех браузерах он отобразится c верхним, левым и нижним отступами.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания маркированного списка</title>
    </head>
    <body>
        <h1>Главное меню</h1>
        <ul>
            <li>Главная</li>
            <li>Блог</li>
            <li>Услуги</li>
            <li>Контакты</li>
        </ul>
    </body>
</html>

Расширенные возможности

По умолчанию для выделения элементов маркированного списка используется закрашенный круг. HTML позволяет переопределить эту настройку с помощью атрибута type.

Значения, которые может принимать атрибут type:

  • disc — применяется по умолчанию, и выводит маркер в виде закрашенного круга.
  • circle — оформление в виде пустого круга (окружности).
  • square — маркер выводится в виде закрашенного квадрата.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Изменение типа маркировки</title>
    </head>
    <body>
        <h1>Список покупок</h1>
        <ul type="circle">
            <li>500гр томатов</li>
            <li>Упаковка риса</li>
            <li>Чесночный соус</li>
            <li>Винный уксус</li>
        </ul>
    </body>
</html>

Последние публикации