Язык гипертекстовой разметки поддерживает три типа списков, для каждого из которых используются свои теги.

Маркированный список

Маркированный список содержит ненумерованные списки элементов без определенной последовательности. Для создания маркированного списка используется блочный элемент <ul>.

Каждый элемент списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Маркером для всех пунктов по умолчанию является маленький черный кружок.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h1>Маркированный список</h1>
    <ul>
      <li>Первый пункт списка</li>
      <li>Другой пункт списка</li>
      <li>Еще один пункт списка</li>
    </ul>
  </body>
</html>

Результат

Маркированный список

Элементы в маркированных списках по умолчанию отмечены марками (маленькие черные круги). Тем не менее, вы можете изменить стиль маркера по умолчанию для элементов списка, используя атрибут type attribute.

Вы можете использовать атрибут type, чтобы изменить стиль маркера по умолчанию для элементов списка.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <ul type="circle">
      <li>Пункт списка</li>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
    </ul>
    <ul type="square">
      <li>Пункт списка</li>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
    </ul>
  </body>
</html>

Результат

Списки

Вы также можете использовать свойство CSS list-style-type или list-style-image для определения типа элемента в списке.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h2>Маркированный список:</h2>
    <ul style="list-style-type: square;">
      <li>Прохладительные напитки</li>
      <li>Горячие напитки</li>
      <li>Мороженое</li>
    </ul>
    <ul style="list-style-type: disc;">
      <li>Кока-кола</li>
      <li>Fanta</li>
      <li>Чай со льдом</li>
    </ul>
    <ul style="list-style-type: circle;">
      <li>Кока-кола</li>
      <li>Fanta</li>
      <li>Чай со льдом</li>
    </ul>
  </body>
</html>

Результат

Маркированный список

Нумерованный список

Нумерованный список содержит элементы в определенной последовательности. Список помещается в блочный элемент <ol>.

Каждый элемент нумерованного списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Пункты списка автоматически нумеруются.

Пример

<!DOCTYPE html>
<html>
<head>
      <title>Заголовок окна веб-страницы</title>
</head>
<body>
       <h1>Нумерованный список</h1>
      <ol>
	   <li>Первый пункт нумерованного списка</li>
              <li>Второй пункт нумерованного списка</li>
	   <li>Третий пункт нумерованного списка</li>
      </ol>					

</body>
</html>

Результат

Нумерованный список

Если вы хотите создать нумерованный список с римскими цифрами или же список, где последовательность указана буквами, то просто добавьте к элементу <ol> type="a" или type="I" соответственно.

Пример

<!DOCTYPE html>
<html>
<head>
      <title>Заголовок окна веб-страницы</title>
</head>
<body>
       <h3>Нумерованный список:</h3>
       <ol>
             <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
       </ol>  
       <h3>Список с буквенной нумерацией</h3>
       <ol type="A">
             <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
       </ol>  
       <h3>Список со строчными буквами</h3>
       <ol type="a">
               <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
       </ol>  
       <h3>Нумерованный римскими цифрами список:</h3>
       <ol type="I">
             <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
      </ol>  
      <h3>Нумерованный строчными римскими цифрами список</h3>
      <ol type="i">
              <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
      </ol>  				
</body>
</html>

Результат

Разные списки

Список определений (описаний)

В списке определений указываются термины/названия и их определения. Такого рода списки используются для создания словарей, справочников и т.д.

Для создания списка определений используется парный элемент <dl>, в котором термины/названия мы записываем в теге <dt>, а их определения в теге <dd>.

Пример

<!DOCTYPE html>
<html>
<head>
      <title>Заголовок окна веб-страницы</title>
</head>
<body>
     <h1>Список определений:</h1>
      <dl>
	   <dt>Чай</dt>
	   <dd>- горячий напиток</dd>
	   <dt>Сок</dt>
	   <dd>- прохладительный напиток</dd>
      </dl>							
</body>
</html>

Результат

Список определений

Практикуйте свои знания

Какие типы списков существуют в HTML?
Считаете ли это полезным?