Главная » Руководство по HTML – HTML5 введение » Неупорядоченные списки HTML

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

Неупорядоченный (ненумерованный, маркированный) список — это список элементов на веб-странице, созданный для организации различных элементов так, чтобы их было удобно просматривать пользователям веб-сайта.

HTML - тег <ul> определяет неупорядоченный (маркированный) или как его еще называют ненумерованный список.

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

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

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

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

Маркеры элемента списка (list-style-type)

Свойство CSS list-style-type используется для определения стиля маркера элемента списка. И может иметь одно из следующих значений:

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

<ul style="list-style-type:disc;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

<ul style="list-style-type:circle;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

<ul style="list-style-type:square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

<ul style="list-style-type:none;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

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

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

<ul>
 <li>HTML</li>
 <li>CSS
   <ul>
    <li>HTML5</li>
    <li>CSS3</li>
   </ul>
  </li>
  <li>JavaScript</li>
</ul>

HTML
CSS
- HTML5
- CSS3
JavaScript

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

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

С помощью CSS Списки HTML могут быть оформлены различными способами.

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

<!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">Главная</a></li>
  <li><a href="#news">Новости</a></li>
  <li><a href="#contact">Контакт</a></li>
  <li><a href="#about">О Компании</a></li>
</ul>

</body>
</html>

ПРИМЕР

Краткое содержание

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

Справочник по тегам HTML

Справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

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

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

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

Списки HTML ☚

Поделиться ссылкой