Язык гипертекстовой разметки поддерживает три типа списков, для каждого из которых используются свои теги.
Маркированный список
Маркированный список содержит ненумерованные списки элементов без определенной последовательности. Для создания маркированного списка используется блочный элемент <ul>.
Каждый элемент списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Маркером для всех пунктов по умолчанию является маленький черный кружок.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Маркированный список</h1>
<ul>
<li>Первый пункт списка</li>
<li>Другой пункт списка</li>
<li>Еще один пункт списка</li>
</ul>
</body>
</html>Результат
Элементы в маркированных списках по умолчанию отмечены марками (маленькие черные круги). Тем не менее, вы можете изменить стиль маркера по умолчанию для элементов списка, используя атрибут type attribute.
Вы можете использовать атрибут type, чтобы изменить стиль маркера по умолчанию для элементов списка.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</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 для определения типа элемента в списке.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</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>Кока-кола</li>
<li>Fanta</li>
<li>Чай со льдом</li>
</ul>
<ul style="list-style-type: circle;">
<li>Кока-кола</li>
<li>Fanta</li>
<li>Чай со льдом</li>
</ul>
</body>
</html>Результат
Нумерованный список
Нумерованный список содержит элементы в определенной последовательности. Список помещается в блочный элемент <ol>.
Каждый элемент нумерованного списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Пункты списка автоматически нумеруются.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Нумерованный список</h1>
<ol>
<li>Первый пункт нумерованного списка</li>
<li>Второй пункт нумерованного списка</li>
<li>Третий пункт нумерованного списка</li>
</ol>
</body>
</html>Результат
Если вы хотите создать нумерованный список с римскими цифрами или же список, где последовательность указана буквами, то просто добавьте к элементу <ol> type="a" или type="I" соответственно.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</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>Результат
Список определений (описаний)
В списке определений указываются термины/названия и их определения. Такого рода списки используются для создания словарей, справочников и т.д.
Для создания списка определений используется парный элемент <dl>, в котором термины/названия мы записываем в теге <dt>, а их определения в теге <dd>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Список определений:</h1>
<dl>
<dt>Чай</dt>
<dd>- горячий напиток</dd>
<dt>Сок</dt>
<dd>- прохладительный напиток</dd>
</dl>
</body>
</html>Результат
Практикуйте свои знания
