Что такое маркированные списки?
Маркированный список - это HTML список, пункты которого отмечены каким-либо символом, обычно символом bullet (пуля).
Внимание! Весь код в примерах отредактирован на сервисе C D E P E N.
Чтобы получить визуальную информацию — нажмите в редакторе на вкладку Result.
Простой пример маркированного списка:
Самый простой и наглядный пример маркированного списка - это содержание книги или меню сайта с категориями и подкатегориями
В HTML для создания маркированного списка обычно используется специальный тег <ul>. И давайте сразу рассмотрим простой пример:
В HTML-тег <ul> мы поместили HTML-тег <li>. Каждый новый пункт маркированного списка - это новый тег <li>.
Пример маркированного списка с вложенностью:
Маркированные списки могут быть многоуровневыми. Посмотрите пример ниже:
Каждый новый уровень маркированного списка находится на уровне тега <li> и вместо тега <li> мы помещаем тег <ul>, тем самым, мы создаем вложенности. Вложенностей маркированного списка <ul> может быть сколько угодно.
Примеры маркированных списков для горизонтального и вертикального меню сайта:
Очень часто маркированные списки <ul><li> используются для создания навигации (меню сайта), ведь такие списки выглядят понятно и легко читаются, а также стилизуются с помощью CSS-стилей.
Пример стилизации маркированного списка:
Для стилизации маркированного списка <ul><li>,- вы можете использовать CSS-селекторы, псевдоклассы и псевдоэлементы.
А стилизовать маркированный список вы можете с помощью CSS-свойства list-style-type, если по каким-то причинам вам не подходит стандартный значок слева bullet (пуля).
Нумерованные HTML-списки
Что такое нумерованные списки?
Единственное отличие нумерованных списков от маркированного списка заключается в том, что каждый пункт имеет номер от 1 до бесконечности.
Простой пример нумерованного списка:
Для того чтобы создать нумерованный список, вам необходимо в HTML-тег <ol> поместить HTML-теги <li>, как в примере ниже:
Пример нумерованного списка с бесконечным вложением:
И конечно ваш нумерованный список может иметь бесконечную вложенность. Посмотрите пример нумерованного списка с вложенностью ниже:
Пример смешанных нумерованных и маркированных списков:
И даже мы можем смешивать нумерованные и маркированные списки как в примере ниже:
Примеры атрибутов для нумерованных списков: reversed, start и type
Для нумерованного списка можно задавать различные атрибуты, такие как reversed, start и type.
Атрибут reversed для нумерованного списка позволяет сортировать цифры в обратном порядке.
Атрибут start для нумерованного списка позволяет начинать список к примеру не с 1, как это задано по умолчанию, а с любой другой цифры.
А с помощью атрибута type вы можете задавать типы, которые будут заданы вместо арабских цифр. Например, вместо арабских цифр вы можете задавать буквы алфавита (a, b, c и т.д.) или римские цифры и буквы в разных регистрах.
Посмотрите на примеры атрибутов нумерованного HTML-списка ниже:
Примеры list-style-type для нумерованных списков
И вместо атрибутов вы конечно же можете использовать специальные CSS-свойства для стилизации нумерованных списков, такие как list-style-type или короткую запись list-style:
Заключение
Маркированные списки и нумерованные списки могут быть очень полезными при создании верстки веб-сайтов.
А если вы интересуетесь веб-разработкой, версткой сайтов, программированием, подпишитесь на , где периодически публикуются материалы на эти темы.
