Маркированные списки (Unordered Lists) и нумерованные списки (Ordered Lists)

3 years ago

13K

Sergei Nikonov

Всем привет, с вами Сергей Никонов и в этой статье я расскажу про маркированные html-списки(Unordered Lists) и нумерованные html-списки (Ordered Lists). Мы рассмотрим html-списки на примерах и если вы еще не знаете как создавать html-списки, вы очень быстро разберетесь.

О нумерованных и маркированных списках я рассказываю в своем курсе HTML/CSS Advanced и если вы хотите научиться профессионально верстать веб-сайты и освоить HTML и CSS, я рекомендую пройти курс HTML/CSS Advanced выполняя интерактивные упражнения и тесты для закрепления ваших знаний верстки сайтов.

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

Содержание

Что такое маркированные списки (Unordered Lists)

Простой пример маркированного списка
Пример маркированного списка с вложенностью
Примеры маркированных списков для горизонтальной и вертикальной навигации сайта(меню)
Пример использования list-style-type

Что такое нумерованные списки (Ordered Lists)

Простой пример нумерованного списка
Пример нумерованного списка с бесконечной вложенностью
Пример смешанных нумерованных и маркированных списков
Примеры атрибутов для нумерованных списков: reversed, start и type
Примеры list-style-type для нумерованных списков

Смотрите видеоурок Что такое маркированные HTML-списки (Unordered List) и нумерованные списки (Ordered Lists)

Подпишитесь на YouTube канал FructCode, где вы можете найти полезные видео по теме разработки веб-сайтов, программирования и все, что с этим связано.

Что такое маркированные HTML-списки (Unordered List)

Маркированный список или Unordered List - это HTML список пункты которого отмечены каким-либо символом, обычно символом BULLET (пуля).

Самый простой и наглядный пример маркированного списка - это содержание книги или меню сайта с категориями и подкатегориями

В HTML для создания маркированного списка обычно используется специальных тег <ul>.

И давайте сразу рассмотрим простой пример:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/bGqZOjQ">FructCode.com | Ordered & Unordered Lists | 1</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

В HTML-тег <ul> мы поместили HTML-тег <li>. Каждый новый пункт маркированного списка - это новый тег <li>.

Маркированные списки могут быть многоуровневыми. Посмотрите пример ниже:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/BaWbvOO">FructCode.com | Ordered & Unordered Lists | 2</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

Каждый новый уровень маркированного списка находится на уровне тега <li> и вместо тега <li> мы помещаем тег <ul>, тем самым, мы создаем вложенности. Вложенностей маркированного списка <ul> может быть сколько угодно.

Очень часто маркированные списки <ul><li> используются для создании навигации (меню сайта), ведь такие списки выглядят понятно и легко читаются, а также стилизуются с помощью CSS-стилей.

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/ExWMGdK">FructCode.com | Ordered & Unordered Lists | 3</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

Для стилизации маркированного списка <ul><li> вы можете использовать CSS-селекторы(CSS Selectors), псевдоклассы (Pseudo Classes) и псевдоэлементы(Pseudo Elements).

А стилизовать маркированный список вы можете с помощью CSS-свойства list-style-type, если по каким-то причинам вам не подходит стандартный значок слева bullet (пуля).

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/VwpRgZy">FructCode.com | Ordered & Unordered Lists | 4</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

Если вы еще не знаете, что такое CSS-селекторы, обязательно прочитайте об этом статью или пройдите этот урок из курса HTML/CSS Advanced, а также интерактивные упражнения для закрепления ваших знаний.

Что такое нумерованные HTML-списки (Ordered List)

Единственное отличие нумерованных списков или Ordered Lists от маркированного списка (Unordered Lists) заключается в том, что каждый пункт имеет номер от 1 до бесконечности.

Для того, чтобы создать нумерованный список, вам необходимо в HTML-тег <ol> поместить HTML-теги <li>. как в примере ниже:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/GRWezjw">FructCode.com | Ordered & Unordered Lists | 5</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

И конечно ваш нумерованный список может иметь бесконечную вложенность. Посмотрите пример нумерованного списка с вложенностью ниже:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/yLMwZVe">FructCode.com | Ordered & Unordered Lists | 6</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

И даже мы можем смешивать нумерованные и маркированные списки как в примере ниже:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/qBrvgqV">FructCode.com | Ordered & Unordered Lists | 7</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

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

Атрибут reversed для нумерованного списка позволяет сортировать цифры в обратном порядке.

Атрибут start для нумерованного списка позволяет начинать список к примеру не с 1, как это задано по умолчанию, а с любой другой цифры.

А с помощью атрибута type вы можете задавать типы, которые будут заданы вместо арабских цифр. Например, вместо арабских цифр вы можете задавать буквы алфавита (a, b, c и т.д.) или римские цифры и буквы в разных регистрах.

Посмотрите на примеры атрибутов нумерованного HTML-списка ниже:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/GRWezNw">FructCode.com | Ordered & Unordered Lists | 8</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

И вместо атрибутов вы конечно же можете использовать специальные CSS-свойства для стилизации нумерованных списков, такие как list-style-type или короткую запись list-style:

See the Pen <a href="https://codepen.io/sergey-nikonov/pen/vYxPbgz">FructCode.com | Ordered & Unordered Lists | 9</a> by Sergey Nikonov (<a href="https://codepen.io/sergey-nikonov">@sergey-nikonov</a>) on <a href="https://codepen.io">CodePen</a>.

Вывод

Маркированные списки (Unordered Lists) и нумерованные списки (Ordered Lists) могут быть очень полезными при создании верстки веб-сайтов.

В своем курсе верстке сайтов HTML/CSS Advanced я рассматриваю не только теорию и простые примеры использования HTML-тегов. В практической части интерактивного курса HTML/CSS Advanced вы создадите сайт КиноМонстер (KinoMonster), в котором мы будет использовать всевозможные HTML-теги, включая маркированные списки для навигации сайта.

А если вы интересуетесь веб-разработкой, версткой сайтов, frontend’ом и backend’дом, программированием, а также DevOps и все, что то с ним связано, я рекомендую подписаться на мой YouTube канал FructCode, где я переодически выкладываю материалы по этим темам.

С вами был Сергей Никонов

Увидимся в следующем уроке!