TOC

This article has been localized into Russian by the community.

Основы HTML:

Списки

Время от времени могут пригодиться списки. Вы можете использовать их для того, чтобы показать список ингредиентов в рецепте или в качестве оглавления для вашего документа. HTML-разметка имеет два разных типа списков - упорядоченные и неупорядоченные списки.

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

<ul>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ul>

Эта HTML-разметка приведет к неупорядоченному списку, который выглядит следующим образом:

  • Элемент списка № 1
  • Элемент списка № 2
  • Элемент списка № 3

Обычно неупорядоченный список имеет черные круги в качестве маркеров - вы можете изменить внешний вид маркеров с помощью CSS.

Упорядоченный список выглядит так:

  1. Первый элемент списка
  2. Второй элемент списка.
  3. Третий элемент списка

И вместо тэга <ul>, вы используете <ol> (сокращение для упорядоченного списка)

<ol>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ol>

За исключением очевидной причины использования списка (когда вам действительно нужен список), многие веб-дизайнеры используют этот список для создания своих меню и навигации - поскольку навигация очень часто представляет собой набор связанных ссылок. Использование списка для разметки вашей навигации также означает, что в случае сбоя стиля CSS ссылки все равно будут семантически связаны.

Чему вы научились

  • Существует два вида списков - упорядоченные списки и неупорядоченные списки
  • Тег для упорядоченного списка - <ol>
  • Тег для неупорядоченного списка - <ul>
  • Каждый элемент в списке отмечен знаком <li>
  • Элемент списка является очевидным выбором при создании навигации
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!