0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>26 мар 2024</li>
2
<ul><li>26 мар 2024</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Пункты, маркеры, нумерация, эмодзи и как всё это сочетать между собой.</p>
4
</ul><p>Пункты, маркеры, нумерация, эмодзи и как всё это сочетать между собой.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Автор статей о программировании, технологиях и гаджетах. Пишет код на JavaScript и Python. Любит веб-технологии, модные приложения и магию Apple.</p>
6
<p>Автор статей о программировании, технологиях и гаджетах. Пишет код на JavaScript и Python. Любит веб-технологии, модные приложения и магию Apple.</p>
7
<p>Списки - это способ группировки текста на странице. Они помогают визуально отделить однородный контент от остального текста: покупки, задачи, пункты инструкции, документы на визу и другое. В этой статье разберёмся, какие бывают списки в HTML, чем они различаются и как их правильно верстать.</p>
7
<p>Списки - это способ группировки текста на странице. Они помогают визуально отделить однородный контент от остального текста: покупки, задачи, пункты инструкции, документы на визу и другое. В этой статье разберёмся, какие бывают списки в HTML, чем они различаются и как их правильно верстать.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Тег ul: маркированный список в HTML</a></li>
9
<ul><li><a>Тег ul: маркированный список в HTML</a></li>
10
<li><a>Тег ol: нумерованный список в HTML</a></li>
10
<li><a>Тег ol: нумерованный список в HTML</a></li>
11
<li><a>Тег dl: список определений в HTML</a></li>
11
<li><a>Тег dl: список определений в HTML</a></li>
12
<li><a>Как сделать вложенный список в HTML</a></li>
12
<li><a>Как сделать вложенный список в HTML</a></li>
13
<li><a>Многоуровневый нумерованный список в HTML</a></li>
13
<li><a>Многоуровневый нумерованный список в HTML</a></li>
14
<li><a>Смешанная вложенность</a></li>
14
<li><a>Смешанная вложенность</a></li>
15
<li><a>Стилизация</a></li>
15
<li><a>Стилизация</a></li>
16
</ul><p>Маркированный список подходит для случаев, когда информацию надо просто перечислить и нам не нужна строгая иерархия. Браузер автоматически добавляет отступы и маркеры слева от списка, чтобы данные не сливались с остальным текстом.</p>
16
</ul><p>Маркированный список подходит для случаев, когда информацию надо просто перечислить и нам не нужна строгая иерархия. Браузер автоматически добавляет отступы и маркеры слева от списка, чтобы данные не сливались с остальным текстом.</p>
17
<p>Маркированный список в HTML можно создать с помощью парного тега <ul>. В него помещаются пункты, которые оборачиваются в теги <li>. Рассмотрим на примере процесс создания простого маркированного списка из пяти элементов:</p>
17
<p>Маркированный список в HTML можно создать с помощью парного тега <ul>. В него помещаются пункты, которые оборачиваются в теги <li>. Рассмотрим на примере процесс создания простого маркированного списка из пяти элементов:</p>
18
<ul> <li>JavaScript</li> <li>Python</li> <li>Swift</li> <li>C#</li> <li>Go</li> </ul><em>Скриншот: Skillbox Media</em><p>С помощью нумерованного списка можно расположить элементы в строгом порядке. Нумерация начинается сверху и по умолчанию обозначается арабскими цифрами.</p>
18
<ul> <li>JavaScript</li> <li>Python</li> <li>Swift</li> <li>C#</li> <li>Go</li> </ul><em>Скриншот: Skillbox Media</em><p>С помощью нумерованного списка можно расположить элементы в строгом порядке. Нумерация начинается сверху и по умолчанию обозначается арабскими цифрами.</p>
19
<p>Нумерованный список создаётся с помощью парного тега <ol>. После этого его можно заполнить элементами, которые обёрнуты в <li>:</p>
19
<p>Нумерованный список создаётся с помощью парного тега <ol>. После этого его можно заполнить элементами, которые обёрнуты в <li>:</p>
20
<ol> <li>Написать друзьям</li> <li>Сходить на тренировку</li> <li>Оплатить заказ</li> <li>Забронировать тур</li> </ol>С нумерацией появляется приоритет пунктов<em>Скриншот: Skillbox Media</em><p>Список определений похож на словарь, в котором содержатся записи в формате "слово - значение". Создать его несложно, но на вёрстку может уйти больше времени, чем при работе с маркированными и нумерованными списками.</p>
20
<ol> <li>Написать друзьям</li> <li>Сходить на тренировку</li> <li>Оплатить заказ</li> <li>Забронировать тур</li> </ol>С нумерацией появляется приоритет пунктов<em>Скриншот: Skillbox Media</em><p>Список определений похож на словарь, в котором содержатся записи в формате "слово - значение". Создать его несложно, но на вёрстку может уйти больше времени, чем при работе с маркированными и нумерованными списками.</p>
21
<p>Для начала обозначим парные теги <dl>. А потом добавим в них пункты с помощью тегов <dt> для терминов, а <dd> - для определений. Важно не перепутать последовательность и ничего не пропустить, иначе браузер не сможет правильно отобразить содержимое.</p>
21
<p>Для начала обозначим парные теги <dl>. А потом добавим в них пункты с помощью тегов <dt> для терминов, а <dd> - для определений. Важно не перепутать последовательность и ничего не пропустить, иначе браузер не сможет правильно отобразить содержимое.</p>
22
<p>Вот как это выглядит на примере:</p>
22
<p>Вот как это выглядит на примере:</p>
23
<dl> <dt>CSS</dt> <dd>Язык описания внешнего вида документа</dd> <dt>HTML</dt> <dd>Язык гипертекстовой разметки</dd> </dl><em>Скриншот: Skillbox Media</em><p>А вот как он отобразится в браузере, если перепутать порядок элементов:</p>
23
<dl> <dt>CSS</dt> <dd>Язык описания внешнего вида документа</dd> <dt>HTML</dt> <dd>Язык гипертекстовой разметки</dd> </dl><em>Скриншот: Skillbox Media</em><p>А вот как он отобразится в браузере, если перепутать порядок элементов:</p>
24
<dl> <dd>CSS</dd> <dd>Язык описания внешнего вида документа</dd> <dt>HTML</dt> <dt>Язык гипертекстовой разметки</dt> </dl><em>Скриншот: Skillbox Media</em><p>Списки в HTML могут состоять из нескольких вложенных друг в друга уровней. Например, если у одного из пунктов появляются подпункты, то для отображения этого в браузере надо создать новый список внутри существующего. У каждого уровня вложенности будет свой маркер. Выглядит это так:</p>
24
<dl> <dd>CSS</dd> <dd>Язык описания внешнего вида документа</dd> <dt>HTML</dt> <dt>Язык гипертекстовой разметки</dt> </dl><em>Скриншот: Skillbox Media</em><p>Списки в HTML могут состоять из нескольких вложенных друг в друга уровней. Например, если у одного из пунктов появляются подпункты, то для отображения этого в браузере надо создать новый список внутри существующего. У каждого уровня вложенности будет свой маркер. Выглядит это так:</p>
25
<em>Скриншот: Skillbox Media</em><p>А вот как реализовать такой список в коде:</p>
25
<em>Скриншот: Skillbox Media</em><p>А вот как реализовать такой список в коде:</p>
26
<ul> <li>Пункт 1</li> <li>Пункт 2 <ul> <li>Пункт 2.1</li> <li>Пункт 2.2</li> <li>Пункт 2.3</li> </ul> </li> <li>Пункт 3 <ul> <li>Пункт 3.1</li> <li>Пункт 3.2 <ul> <li>Пункт 3.2.1</li> </ul> </li> </ul> </li> <li>Пункт 4</li> </ul><p>Принцип вложенности работает и для нумерованных списков. Для этого надо создать дополнительный парный тег <ol> и поместить в него подпункты.</p>
26
<ul> <li>Пункт 1</li> <li>Пункт 2 <ul> <li>Пункт 2.1</li> <li>Пункт 2.2</li> <li>Пункт 2.3</li> </ul> </li> <li>Пункт 3 <ul> <li>Пункт 3.1</li> <li>Пункт 3.2 <ul> <li>Пункт 3.2.1</li> </ul> </li> </ul> </li> <li>Пункт 4</li> </ul><p>Принцип вложенности работает и для нумерованных списков. Для этого надо создать дополнительный парный тег <ol> и поместить в него подпункты.</p>
27
<ol> <li>Макароны</li> <li>Овощи <ol> <li>Морковь</li> <li>Картофель</li> <li>Томаты</li> </ol> </li> <li>Фрукты <ol> <li>Яблоки</li> <li>Ягоды <ol> <li>Малина</li> </ol> </li> </ol> </li> <li>Хлеб</li> </ol><p>Можно даже сделать вложенный список внутри вложенного списка, чтобы… ну, вы поняли :)</p>
27
<ol> <li>Макароны</li> <li>Овощи <ol> <li>Морковь</li> <li>Картофель</li> <li>Томаты</li> </ol> </li> <li>Фрукты <ol> <li>Яблоки</li> <li>Ягоды <ol> <li>Малина</li> </ol> </li> </ol> </li> <li>Хлеб</li> </ol><p>Можно даже сделать вложенный список внутри вложенного списка, чтобы… ну, вы поняли :)</p>
28
<em>Скриншот: Skillbox Media</em><p>В маркированные списки можно вкладывать нумерованные и наоборот. Например, если вы хотите составить планы на день и разбить их по категориям "утро", "день" и "вечер". Выглядят смешанные списки так:</p>
28
<em>Скриншот: Skillbox Media</em><p>В маркированные списки можно вкладывать нумерованные и наоборот. Например, если вы хотите составить планы на день и разбить их по категориям "утро", "день" и "вечер". Выглядят смешанные списки так:</p>
29
<em>Скриншот: Skillbox Media</em><p>А вот как воплотить это в разметке:</p>
29
<em>Скриншот: Skillbox Media</em><p>А вот как воплотить это в разметке:</p>
30
<ul> <li>Утро <ol> <li>Зарядка</li> <li>Завтрак</li> <li>Созвон с командой</li> </ol> </li> <li>День <ol> <li>Прогулка</li> <li>Обед</li> </ol> </li> <li>Вечер <ol> <li>Чтение</li> <li>Ужин</li> </ol> </li> </ul><p>HTML по умолчанию использует жирные точки для маркировки пунктов. Но можно поменять их на что-то свежее и неформальное - скажем, на звёздочки, фрукты или даже эмодзи. Делается это с помощью CSS-стилей, сейчас расскажем как.</p>
30
<ul> <li>Утро <ol> <li>Зарядка</li> <li>Завтрак</li> <li>Созвон с командой</li> </ol> </li> <li>День <ol> <li>Прогулка</li> <li>Обед</li> </ol> </li> <li>Вечер <ol> <li>Чтение</li> <li>Ужин</li> </ol> </li> </ul><p>HTML по умолчанию использует жирные точки для маркировки пунктов. Но можно поменять их на что-то свежее и неформальное - скажем, на звёздочки, фрукты или даже эмодзи. Делается это с помощью CSS-стилей, сейчас расскажем как.</p>
31
<p>Для начала - подключим стили в HTML-документ. Для этого в блок <head> надо добавить строку <link rel="stylesheet" href="./style.css"> и создать файл с названием style.css. После этого в нём уже можно описывать правила оформления. Чтобы больше узнать про стилизацию веб-страниц, переходите к нашей статье о вёрстке для начинающих.</p>
31
<p>Для начала - подключим стили в HTML-документ. Для этого в блок <head> надо добавить строку <link rel="stylesheet" href="./style.css"> и создать файл с названием style.css. После этого в нём уже можно описывать правила оформления. Чтобы больше узнать про стилизацию веб-страниц, переходите к нашей статье о вёрстке для начинающих.</p>
32
<p>Для изменения маркеров в CSS доступно свойство list-style-type. Оно принимает значение, которое указывает на вид используемых маркеров. В качестве примера поменяем стандартные точки на квадратные:</p>
32
<p>Для изменения маркеров в CSS доступно свойство list-style-type. Оно принимает значение, которое указывает на вид используемых маркеров. В качестве примера поменяем стандартные точки на квадратные:</p>
33
ul { list-style-type: square; }<p>У свойства list-style-type есть множество параметров, которые используются не только для дизайна, но и для локализации. Например, с его помощью можно подключить региональные числа - скажем, армянские, грузинские или китайские. Все доступные параметры можно посмотреть на портале<a>MDN Web Docs</a>. Вот некоторые из них:</p>
33
ul { list-style-type: square; }<p>У свойства list-style-type есть множество параметров, которые используются не только для дизайна, но и для локализации. Например, с его помощью можно подключить региональные числа - скажем, армянские, грузинские или китайские. Все доступные параметры можно посмотреть на портале<a>MDN Web Docs</a>. Вот некоторые из них:</p>
34
<em>Скриншот: Skillbox Media</em><p>А теперь попробуем в качестве маркеров использовать эмодзи - они помогут визуально освежить список и не тратить время на поиск и подготовку картинок. Чтобы подключить эмодзи, пропишем уже знакомое нам свойство list-style-type, а в качестве параметра передадим код эмодзи. Коды можно найти на официальном<a>сайте Unicode</a>.</p>
34
<em>Скриншот: Skillbox Media</em><p>А теперь попробуем в качестве маркеров использовать эмодзи - они помогут визуально освежить список и не тратить время на поиск и подготовку картинок. Чтобы подключить эмодзи, пропишем уже знакомое нам свойство list-style-type, а в качестве параметра передадим код эмодзи. Коды можно найти на официальном<a>сайте Unicode</a>.</p>
35
<p>HTML:</p>
35
<p>HTML:</p>
36
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul><p>CSS:</p>
36
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul><p>CSS:</p>
37
ul { list-style-type: "\2705"; }Вместо скучных маркеров могут быть яркие эмодзи<em>Скриншот: Skillbox Media</em><p>А ещё стили можно применить только для отдельных пунктов списка. Это полезно в тех случаях, когда надо выделить некоторые элементы перечня. Для этого в HTML необходимо использовать классы, а в CSS обращаться к ним в качестве селекторов.</p>
37
ul { list-style-type: "\2705"; }Вместо скучных маркеров могут быть яркие эмодзи<em>Скриншот: Skillbox Media</em><p>А ещё стили можно применить только для отдельных пунктов списка. Это полезно в тех случаях, когда надо выделить некоторые элементы перечня. Для этого в HTML необходимо использовать классы, а в CSS обращаться к ним в качестве селекторов.</p>
38
<p>Для примера сверстаем список с квадратными маркерами, а для одного из пунктов применим эмодзи. Вначале добавим заголовок с помощью парного тега <h1>. После этого создадим список с классом style-1, а второму пункту зададим класс style-2. Это поможет нам выборочно применять стили, не изменяя дизайн всей страницы. В CSS-файле пропишем новое оформление маркеров.</p>
38
<p>Для примера сверстаем список с квадратными маркерами, а для одного из пунктов применим эмодзи. Вначале добавим заголовок с помощью парного тега <h1>. После этого создадим список с классом style-1, а второму пункту зададим класс style-2. Это поможет нам выборочно применять стили, не изменяя дизайн всей страницы. В CSS-файле пропишем новое оформление маркеров.</p>
39
<p>HTML:</p>
39
<p>HTML:</p>
40
<h1>Операционные системы Apple</h1> <ul class="style-1"> <li>iOS</li> <li class="style-2">Android</li> <li>macOS</li> </ul><p>CSS:</p>
40
<h1>Операционные системы Apple</h1> <ul class="style-1"> <li>iOS</li> <li class="style-2">Android</li> <li>macOS</li> </ul><p>CSS:</p>
41
.style-1 { list-style-type: square; } .style-2 { list-style-type: "\274C"; }<em>Скриншот: Skillbox Media</em><ul><li>С помощью HTML можно создавать три вида списков: маркированные (<ul>), нумерованные (<ol>) и списки определений (<dl>).</li>
41
.style-1 { list-style-type: square; } .style-2 { list-style-type: "\274C"; }<em>Скриншот: Skillbox Media</em><ul><li>С помощью HTML можно создавать три вида списков: маркированные (<ul>), нумерованные (<ol>) и списки определений (<dl>).</li>
42
<li>Маркеры и отступы добавляются автоматически, чтобы пользователю было удобнее читать текст.</li>
42
<li>Маркеры и отступы добавляются автоматически, чтобы пользователю было удобнее читать текст.</li>
43
<li>Маркированные и нумерованные списки можно вкладывать друг в друга для создания многоуровневых структур.</li>
43
<li>Маркированные и нумерованные списки можно вкладывать друг в друга для создания многоуровневых структур.</li>
44
<li>Маркеры пунктов можно стилизовать с помощью CSS-свойства list-style-type.</li>
44
<li>Маркеры пунктов можно стилизовать с помощью CSS-свойства list-style-type.</li>
45
</ul><a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>
45
</ul><a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>