HTML-списки
В HTML существует три типа списков: маркированные, нумерованные и списки описаний. Каждый из них задаётся своими тегами. Рассмотрим их подробнее.
Маркированные списки HTML
Маркированные списки используются для группировки элементов, у которых нет числового порядка. Если поменять местами пункты, смысл списка не меняется. Чтобы создать маркированный список, применяют тег <ul>. Тег парный: содержимое располагают между открывающим <ul> и закрывающим </ul>.
Каждый элемент маркированного списка объявляют внутри тега <li>.
Пример HTML-тега <ul> для маркированного списка:
Пример маркированного списка|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Маркированный список:</h1>
<ul>
<li>Это элемент списка</li>
<li>Это другой элемент списка</li>
<li>Ещё один элемент списка</li>
</ul>
</body>
</html>По умолчанию элементы маркированного списка отмечаются маркерами (чёрные кружки). Стиль маркеров по умолчанию можно изменить с помощью атрибута type.
Атрибут type задаёт вид маркеров для пунктов списка. Важно: в HTML5 атрибут type устарел. Вместо него используйте CSS-свойство list-style-type.
Пример HTML-тега <ul> с разными маркерами:
Пример атрибута type для HTML-списков
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<ul type="square">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</body>
</html>Результат
Также тип маркера можно задать через CSS-свойства list-style-type или list-style-image.
Пример <ul> с CSS-свойством list-style-type:
Пример свойства list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Примеры маркированных списков:</h2>
<ul style="list-style-type: square;">
<li>Холодные напитки</li>
<li>Горячие напитки</li>
<li>Мороженое</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Холодный чай</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Холодный чай</li>
</ul>
</body>
</html>Нумерованные списки HTML
Нумерованный список используют, когда пункты должны идти по порядку и отмечаться числами. Он начинается с тега <ol>. Тег парный: содержимое — между открывающим <ol> и закрывающим </ol>.
Каждый пункт нумерованного списка начинается с открывающего тега <li> и заканчивается </li>.
Пример HTML-тега <ol> для нумерованного списка:
Пример нумерованного списка|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Нумерованный список:</h1>
<ol>
<li>Пункт списка номер 1</li>
<li>Пункт списка номер 2</li>
<li>Пункт списка номер 3</li>
</ol>
</body>
</html>По умолчанию пункты нумеруются арабскими цифрами. Чтобы получить буквы или римские цифры, к тегу <ol> добавляют type="a" или type="I". Важно: в HTML5 атрибут type устарел; предпочтительнее CSS-свойство list-style-type.
Пример <ol> с буквами и римскими цифрами:
Разные виды нумерации пунктов
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>Список с цифрами:</h3>
<ol>
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h3>Список с прописными буквами:</h3>
<ol type="A">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h3>Список со строчными буквами:</h3>
<ol type="a">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h3>Список с римскими цифрами:</h3>
<ol type="I">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
<h3>Список со строчными римскими цифрами:</h3>
<ol type="i">
<li>Персик</li>
<li>Абрикос</li>
<li>Банан</li>
<li>Клубника</li>
</ol>
</body>
</html>Списки описаний HTML
Списки описаний связывают термины с пояснениями — как в словаре или глоссарии.
Для такого списка используют тег <dl>. Тег парный.
Внутри <dl> для термина применяют <dt>, а для описания термина — <dd>.
Пример HTML-тега <dl> для списка описаний:
Пример списка описаний|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Списки описаний:</h1>
<dl>
<dt>Чай</dt>
<dd>горячий напиток</dd>
<dt>Сок</dt>
<dd>холодный напиток</dd>
</dl>
</body>
</html>Результат
Вложенные списки HTML
Вложенный список — это список внутри другого списка.
Пример вложенного HTML-списка:
Пример вложенного HTML-списка:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Вложенный HTML-список</h2>
<p>Вложенный список содержит другой список внутри себя.</p>
<ul>
<li>Тетради</li>
<li>
Книги
<ul>
<li>Детективы</li>
<li>Романы</li>
<li>Сказки</li>
</ul>
</li>
</ul>
</body>
</html>Управление нумерацией
По умолчанию нумерация в упорядоченном списке начинается с 1. Атрибут start задаёт число, с которого начать отсчёт. Атрибут reversed включает обратный порядок, а атрибут value у конкретного <li> позволяет вручную задать номер пункта.
Пример нумерации, начинающейся с заданного числа:
Пример списка с нумерацией с заданного числа:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Управление нумерацией</h2>
<p>По умолчанию нумерация в упорядоченном списке начинается с 1. Атрибут start задаёт число, с которого начать отсчёт.</p>
<ol start="40">
<li>Ручка</li>
<li>Карандаш</li>
<li>Тетрадь</li>
</ol>
<ol type="I" start="40">
<li>Ручка</li>
<li>Карандаш</li>
<li>Тетрадь</li>
</ol>
</body>
</html>Горизонтальный список с помощью CSS
HTML-списки можно оформлять по-разному с помощью CSS.
Например, можно сделать горизонтальное меню навигации, расположив пункты списка в ряд.
Пример горизонтального списка с CSS:
Пример горизонтального списка с CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Пример меню навигации</h2>
<p>
HTML-списки можно оформлять разными CSS-свойствами. Например, можно построить меню навигации, выстроив список по горизонтали.
</p>
<ul>
<li>
<a href="#home">Главная</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Инструменты</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Сниппеты</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Викторины</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">Строковые функции</a>
</li>
</ul>
</body>
</html>Практика
Какие типы HTML-списков названы в этой статье?