Неупорядоченные списки HTML
Тег <ul> определяет неупорядоченный (маркированный) список.
Неупорядоченный список HTML
Неупорядоченный список начинается с тега <ul>, а каждый элемент начинается с тега <li>. По умолчанию элементы отмечены маркерами.
Пример
Базовый маркированный список.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовый Ul</title>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Неупорядоченный список HTML - выбор маркера элемента
CSS-свойство list-style-type задаёт стиль маркера. Значения включают disc (маркер-точка, по умолчанию), circle, square, и none (без маркера).
Disc
Маркеры установлены как точки.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Маркер: диск</title>
</head>
<body>
<ul style="list-style-type:disc;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Circle
Маркеры установлены как окружности.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Маркер: круг</title>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Square
Маркеры установлены как квадраты.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Маркер: квадрат</title>
</head>
<body>
<ul style="list-style-type:square;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
None
Совсем без маркеров.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Без маркера</title>
</head>
<body>
<ul style="list-style-type:none;">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
Вложенные списки HTML
Списки можно вкладывать друг в друга, то есть один список может находиться внутри другого.
Примечание: Элемент списка (<li>) может содержать и новый список, и другие элементы, такие как изображения и ссылки.
Пример
Список с подсписком внутри одного элемента.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вложенный список</title>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Чёрный чай</li>
<li>Зелёный чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
</body>
</html>
Горизонтальный список с CSS
Списки можно оформить множеством способов с помощью CSS. Популярный вариант — расположить список горизонтально, чтобы создать меню навигации, используя float:left для элементов.
Пример
Горизонтальное меню навигации, созданное из списка.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
</body>
</html>
Итоги главы
Подведём итог: используйте элемент <ul> для неупорядоченного списка, CSS-свойство list-style-type для маркера, и элемент <li> для каждого элемента. Списки можно вкладывать друг в друга, элементы могут содержать другие элементы, а float:left располагает список горизонтально.
Теги списков HTML
Теги, связанные со списками: <ul> (неупорядоченный список), <ol> (упорядоченный список), <li> (элемент списка), <dl> (список описаний), <dt> (термин), и <dd> (описание термина).