ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

HTML Списки

❮ Prev Next ❯

HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.

 HTML Пример списка

Неупорядоченный список:

  • Пункт
  • Пункт
  • Пункт
  • Пункт

Упорядоченный список:

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  4. Четвёртый пункт
Попробуйте сами »

Неупорядоченный HTML Список

Неупорядоченный (ненумерованный) список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

Элементы списка будут помечены маркерами (маленькие черные кружки) по умолчанию:

Пример

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Попробуйте сами »

Неупорядоченный HTML Список - выберите маркер элемента списка

CSS свойство list-style-type используется для определения стиля маркера элемента списка:

Значение Описание
disc Устанавливает маркер элемента списка как маленький чёрный кружок (по умолчанию)
circle Устанавливает маркер элемента списка в виде маленького пустого кружка
square Устанавливает маркер элемента списка в виде квадрата
none Элементы списка не будут отмечены (маркеры отсутствуют)

Пример - Disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Попробуйте сами »

Пример - Circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Попробуйте сами »

Пример - Square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Попробуйте сами »

Пример - None

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Попробуйте сами »

Упорядоченный HTML Список

Упорядоченный (нумерованный) список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.

Элементы списка будут помечены номерами по умолчанию:

Пример

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

Упорядоченный HTML Список - Атрибут Type

Атрибут type тега <ol> определяет тип маркера элемента списка:

Тип Описание
type="1" Элементы списка будут пронумерованы цифрами (по умолчанию)
type="A" Элементы списка будут пронумерованы заглавными буквами
type="a" Элементы списка будут пронумерованы строчными буквами
type="I" Элементы списка будут пронумерованы большими римскими цифрами
type="i" Элементы списка будут пронумерованы маленькими римскими цифрами

Цифры:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

Заглавные буквы:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

Строчные буквы:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

Большие римские цифры:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

Маленькие римские цифры:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

HTML Списки описания

HTML также поддерживает списки описания.

Список описания - это список терминов с описанием каждого термина.

Тег <dl> определяет список описания, тег <dt> определяет термин (имя), а тег <dd> описывает каждый термин:

Пример

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Попробуйте сами »

Вложенные HTML-списки

Список может быть вложенным (списки внутри списков):

Пример

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Попробуйте сами »

Примечание: Элементы списка могут содержать новый список и другие элементы HTML, такие как изображения и ссылки и т.д.

Подсчет контрольного списка

По умолчанию упорядоченный список начинает отсчет с 1. Если вы хотите начать подсчет с указанного числа, вы можете использовать атрибут start:

Пример

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Попробуйте сами »

Горизонтальный список с помощью CSS

HTML-списки можно стилизовать различными способами с помощью CSS.

Один из популярных способов - это стилизовать список по горизонтали для создания меню навигации:

Пример

<!DOCTYPE html>
<html>
<head>
<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">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Попробуйте сами »

Совет: Вы можете узнать больше о CSS в нашем CSS Учебнике.

Резюме раздела

  • Используйте HTML елемент <ul> для определения неупорядоченного списка
  • Используйте CSS свойство list-style-type для определения маркера элемента списка
  • Используйте HTML элемент <ol> для определения упорядоченного списка
  • Используйте HTML атрибут type для определения типа нумерации
  • Используйте HTML элемент <li> для определения элемента списка
  • Используйте HTML элемент <dl> для определения списка описания
  • Используйте HTML элемент <dt> для определения термина описания
  • Используйте HTML элемент <dd> для описания термина в списке описания
  • Списки могут быть вложены в списки
  • Элементы списка могут содержать другие элементы HTML
  • Используйте CSS свойство float:left или display:inline для горизонтального отображения списка

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавьте элемент списка с текстом "Coffee" внутри элемента <ul>.

<ul>Coffee</ul>

HTML Теги списка

Тег Описание
<ul> Определяет неупорядоченный (ненумерованный) список
<ol> Определяет упорядоченный (нумерованный) список
<li> Определяет пункты списка
<dl> Определяет список описания
<dt> Определяет термин в списке описания
<dd> Описывает термин в списке описания

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Для чего нужны HTML-списки?
  • Какие бывают HTML-списки?
  • Каким тегом определяется неупорядоченный HTML-список?
  • Каким тегом определяется упорядоченный HTML-список?
  • Каким тегом определяется каждый элемент в HTML-списке?
  • Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
  • Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
  • Что такое список описаний?
  • Какой тег определяет список описаний?
  • Какой тег определяет термин (имя) в списке описаний?
  • Какой тег определяет описание каждого термина в списке описаний?
❮ Prev Next ❯