Списки HTML
Списки HTML позволяют группировать набор связанных элементов вместе.
Пример
Неупорядоченный список и упорядоченный список.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Введение в списки</title>
</head>
<body>
<h2>Маркированный HTML-список</h2>
<ul>
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ul>
<h2>Нумерованный HTML-список</h2>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвёртый элемент</li>
</ol>
</body>
</html>
Неупорядоченный список HTML
Неупорядоченный список начинается с тега <ul>, а каждый элемент начинается с тега <li>. По умолчанию элементы отмечены маркерами (маленькими чёрными кружками).
Пример
Маркированный список напитков.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Маркированный список</title>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Упорядоченный список HTML
Упорядоченный список начинается с тега <ol>, а каждый элемент начинается с тега <li>. По умолчанию элементы отмечены числами.
Пример
Нумерованный список напитков.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Нумерованный список</title>
</head>
<body>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Списки описаний HTML
Список описаний — это список терминов с описанием для каждого. Тег <dl> определяет список, тег <dt> определяет каждый термин, а тег <dd> его описывает.
Пример
Список описаний напитков и того, чем они являются.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список описаний</title>
</head>
<body>
<dl>
<dt>Кофе</dt>
<dd>- чёрный горячий напиток</dd>
<dt>Молоко</dt>
<dd>- белый холодный напиток</dd>
</dl>
</body>
</html>
Теги списков HTML
Теги, связанные со списками: <ul> (неупорядоченный список), <ol> (упорядоченный список), <li> (элемент списка), <dl> (список описаний), <dt> (термин в списке описаний) и <dd> (описание термина).