HTML-тег <ul>
HTML-тег <ul> используется для создания маркированного (неупорядоченного) списка, который группирует набор элементов без какого-либо числового порядка. При изменении порядка элементов списка их смысл не меняется. Обычно элементы неупорядоченного списка отображаются с помощью маркера (буллета). Он может иметь разную форму, например, круг, точку или квадрат.
Каждый элемент неупорядоченного списка объявляется внутри тега <li>.
Тег <ul> является блочным элементом и занимает всё доступное горизонтальное пространство. Его высота зависит от содержимого внутри контейнера. Неупорядоченный список обычно отображается как маркированный список.
Тег <ol> также представляет список элементов и создает нумерованный (упорядоченный) список. Однако он отличается от <ul>, так как порядок в теге <ol> имеет значение. По умолчанию элементы нумерованного списка отображаются с помощью цифр.
Теги <ul> и <ol> могут быть вложены друг в друга на любую глубину. Вложенные списки могут чередоваться между <ul> и <ol>. Однако следует учитывать, что при вложении одного списка в другой внутренний список должен находиться внутри элемента <li> внешнего списка. Это означает, что прямым дочерним элементом списка должен быть <li>, но этот элемент <li> может содержать другой список. Маркер элемента списка можно изменить с помощью CSS. Однако семантическое значение, выражаемое выбором типа списка, нельзя изменить с помощью CSS.
Синтаксис
Тег <ul> используется парой. Содержимое записывается между открывающим (<ul>) и закрывающим (</ul>) тегами.
Пример HTML-тега <ul>:
Пример HTML-тега <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Результат
Вы можете использовать атрибут type для изменения стиля маркера по умолчанию для элементов списка. Примечание: атрибут type устарел в HTML5. Для современной веб-разработки рекомендуется использовать CSS-свойство list-style-type.
Пример HTML-тега <ul> с атрибутом type:
Пример HTML-тега <ul> с атрибутом type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Вы также можете использовать CSS-свойства list-style-type или list-style-image для определения типа маркера элемента списка.
Пример HTML-тега <ul> с использованием свойства CSS list-style-type:
Пример HTML-тега <ul> с CSS-свойством list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| compact | compact | Указывает, что список должен отображаться в компактном стиле. Не поддерживается в HTML5. |
| type | disc square circle | Устанавливает тип маркера. Не поддерживается в HTML5. |
Тег <ul> также поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать HTML-тег <ul>
{
"tag_name": "ul"
}Практика
Какие из следующих утверждений об HTML-теге <ul> верны согласно статье https://www.w3docs.com/learn-html/html-ul-tag.html?