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

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

С точки зрения организации текста они полезны, например, когда необходимо обобщить понятия по точкам, последовательно указать фазы процесса или составить список определений или глоссарий.

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

С точки зрения рендеринга, они обычно нарушают типографский ритм и делают текст более приятным и читабельным.

Итак, давайте посмотрим, какие три типа списка доступны в HTML:

  • Упорядоченные списки
  • Списки неупорядоченные
  • Списки определений

Все три типа списков работают одинаково: тег открывается, перечисляются различные элементы списка (каждый со своим тегом), тег списка закрывается. 

UL, неупорядоченные списки (или маркированные списки)

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

<ul>
  <li>первый элемент</li>
  <li>второй элемент</li>
  <li>третий элемент</li>
</ul>
Список

Даже если рендеринг графики зависит от браузера, результат, как правило, получается при использовании маркеров в программах обработки текста: мы получаем элементы один под другим с полем слева и классический «полный шар» для каждой точки. ,

Мы можем выбрать другие символы или символы, но позже мы увидим, как это сделать с помощью CSS, а пока достаточно сказать, что атрибут «type» , предоставленный для этой цели, был устаревшим в HTML 5.

Древовидные списки

В общем, мы можем вставлять разные уровни в списки, создавая «древовидные» структуры, полезные для определения объектов, таких как меню. Для этого просто вставьте новый список в элемент:

 <ul>
	<li>первый в первом списке</li>
	<li>второй в первом списке
		<ul>
			<li>первый во втором списке</li>
			<li>второй во втором списке
				<ul>
					<li>первый в третьем списке</li>
				</ul>
			</li>
			<li>третий во втором списке</li>
		</ul>
	</li>
</ul>

Интересно, что базовый рендеринг обычно показывает разные символы для точек в зависимости от уровня элемента.

древовидный список

OL, упорядоченные списки (или нумерованные списки)

упорядоченный список пронумерованный списком элементов, составляющих список. Тег для открытия упорядоченного списка — <ol>, и в этом случае элементы идентифицируются тегом <li> :

<ol>
	<li>первый элемент</li>
	<li>второй элемент</li>
	<li>третий элемент</li>
</ol>
нумерованный список

Тип атрибута, чтобы описать тип списка

Атрибут type, примененный к тегу ol, служит для указания типа перечисления, которое мы хотим применить. Стиль перечисления, отображаемый браузером по умолчанию, является числовым, но мы можем указать, соответствуют ли элементы списка точкам, определенным в виде цифр, букв алфавита или римских цифр.

Значение типаописание
type="1"«Арабские» целые числа (значение по умолчанию)
type="a"строчные буквы алфавита
type="A"прописные буквы алфавита
type="i"строчные римские цифры
type="I"прописные римские цифры

Start и value, управлять нумерацией

Может случиться, что для разных нужд мы хотим начать нумерацию с определенного значения, в этом случае мы используем два атрибута:

атрибутописание
Start указывает начальное значение, с которого начинается нумерация списка. применим к ol
value указывает значение, примененное к нумерации определенного элемента, а также изменяет нумерацию последующих элементов в списке. применим к li (только если он внутри ol)

Вот простой пример:

<ol start="10">
  <li>элемент</li>
  <li>элемент</li>
  <li value="30">элемент</li>
  <li>элемент</li>
</ol>
неупорядоченый список

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

Списки определений являются идеальным инструментом для создания списков. Необходимо связать описательный текст с каждым элементом. Мы определяем списки ( определение списка ) с помощью тега <dl> , а элементы списка, в отличие от других списков, состоят из двух частей:

тегописание
<Dt>термин определения ), указывает термин, который будет определен. В отличие от элемента <li> он не представлен с левым отступом
<Dd>описание определения ), является фактическим определением термина. Обычно этот элемент отображается с возвратом

Давайте посмотрим на пример:

Вот основные теги для разделения текста:
<dl>
  <dt>p</dt>
  <dd>идентифицирует открытие нового параграфа</dd>
  <dt>div</dt>
  <dd>идентифицирует открытие нового текстового блока</dd>
  <dt>span</dt>
  <dd>идентифицирует открытие встроенного элемента, которому назначено форматирование через стили</dd>
</dl>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *