Урок №18. HTML. Списки

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як додати списки в HTML-код на веб-сайті?

 HTML список. Приклад

Невпорядкований (ненумерований) список:

  • Item
  • Item
  • Item
  • Item

Впорядкований (нумерований) список:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
Спробуйте самі! »

Невпорядкований список 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>
  <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 список - атрибут типу

Атрибут типу тега <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> Визначає невпорядкований (ненумерований) список
<ol> Визначає впорядкований (нумерований) список
<li> Визначає елемент списку
<dl> Визначає список опису
<dt> Визначає термін у списку опису
<dd> Описує термін у списку опису

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.