Списки HTML

Списки делятся на нумерованные и маркированные. Рассмотрим, как сделать список в HTML, чем отличается каждый из этих типов, и варианты их использования.

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

Нумерованный список в HTML устанавливается с помощью тега ol. Каждый элемент списка отделяется тегом li. Нужно помнить, что элементы списка li наследуют стили самого списка ol. Рассмотрим пример использования нумерованного списка:

<ol>
	<li>Электроник</li>
	<li>Сыроежкин</li>
	<li>Смирнов</li>
	<li>Чижиков</li>
	<li>Кукушкина</li>
</ol>

Так это выглядит:

1. Электроник
2. Сыроежкин
3. Смирнов
4. Чижиков
5. Кукушкина

Атрибуты нумерованного списка

Тег ol имеет собственные атрибуты:

• type – определяет тип нумерации. Тип нумерации способен принимать следующие значения:
• A – заглавные буквы латинского алфавита;
• a – латинские строчные буквы;
• I – римские заглавные цифры;
• i – римские строчные цифры;
• 1 – арабские цифры.
• reversed – устанавливает нумерацию в обратном порядке;
• start – задает стартовый номер для нумерации.

Используются атрибуты следующим образом:

<ol type="A" reversed start="7">
	<li>Электроник</li>
	<li>Сыроежкин</li>
	<li>Смирнов</li>
	<li>Чижиков</li>
	<li>Кукушкина</li>
</ol>

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

Маркированный список в HTML устанавливается с помощью тега ul. Каждый элемент списка, также как и у нумерованных списков, отделяется тегом li, и элементы li наследуют стили списка ul. Пример применения маркированного списка:

<ul>
	<li>Электроник</li>
	<li>Сыроежкин</li>
	<li>Смирнов</li>
	<li>Чижиков</li>
	<li>Кукушкина</li>
</ul>

И результат примера:

• Электроник
• Сыроежкин
• Смирнов
• Чижиков
• Кукушкина

Атрибуты маркированного списка

Маркированный список ul способен принимать всего один атрибут:

• type – задает вид маркера:
• square – квадрат;
• disc – круг;
• circle – окружность.

Применим атрибут к маркированному списку на практике:

<ul type="circle">
	<li>Электроник</li>
	<li>Сыроежкин</li>
	<li>Смирнов</li>
	<li>Чижиков</li>
	<li>Кукушкина</li>
</ul>

Результат:

• Электроник
• Сыроежкин
• Смирнов
• Чижиков
• Кукушкина

Загляните в раздел Работа с текстом «Нубекс» для получения информации о работе с текстами на сайте.