Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Списки HTML

теги: 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>

Результат:

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

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

Комментарии 0