HTML тег <ul>

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

Синтаксис тега <ul>

<ul>
	<li>Элемент #1</li>
	<li>Элемент #2</li>
	<li>Элемент #3</li>
	<li>...</li>
</ul>

Этот код преобразуется в маркированный список на сайте:

• Элемент #1
• Элемент #2
• Элемент #3
• ...

Тег <ul> требует обязательного использования закрывающего тега </ul>.

Для формирования элементов списка используется парный тег <li>..</li>. Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.

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

Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег <ul> является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.

Например

<ul>
	<li>Элемент #1</li>
	<li>
	<ul>
		<li>Элемент #2-1</li>
		<li>Элемент #2-2</li>
		<li>Элемент #2-3</li>
	</ul>
	</li>
	<li>Элемент #3</li>
	<li>...</li>
</ul>

Атрибуты и свойства тега <ul>

Широко распространённым атрибутом тега <ul> является атрибут type, указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения

1. type="disc" — маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.

2. type="circle" — маркер в виде прозрачного кружка

Например:

<ul type="circle">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
</ul>

А вот как это выглядит на странице:

• Элемент #1
• Элемент #2

3. type="square" — маркер в виде квадратика

Например:

<ul type="square">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
</ul>

А вот как это выглядит на странице:

• Элемент #1
• Элемент #2

В CSS тип маркера задается с помощью атрибута list-style-type:

<ul style="list-style-type: square">
  <li>...</li>
</ul>

Рассмотрим какие значения может принимать list-style-type:

• disc — маркер в виде кружка (пример был выше)
• circle — маркер в виде прозрачного кружка (пример был выше)
• square — маркер в виде квадратика (пример был выше)
• decimal — маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
• decimal-leading-zero — маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
• lower-roman — маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
• upper-roman — маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
• lower-latin — маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
• upper-latin — маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
• lower-greek — маркер в виде списка греческим алфавитом маленькими буквами
• upper-greek — маркер в виде списка греческим алфавитом большими буквами

Атрибут можно назначить как самому тегу <ul>, так и тегам <li>. При задании атрибута тегу <ul> все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:

Код при этом выглядит так:

<ul type="circle">
	<li>Элемент #1</li>
	<li style="list-style-type: disc">Элемент #2</li>
	<li>Элемент #3</li>
</ul>

А так это выглядит на странице:

• Элемент #1
• Элемент #2
• Элемент #3

Изменение маркеров тега <ul> с помощью CSS

Элементы маркированного списка, создаваемые тегом <ul>, могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например

<ul style="list-style-image: url("primer.gif")">
	<li>Элемент #1</li>
	<li>Элемент #2</li>
	<li>Элемент #3</li>
</ul>

А так это выглядит на странице:

• Элемент #1
• Элемент #2
• Элемент #3

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

Читайте также:
• Как разместить элементы списка горизонтально
• Как убрать маркеры в маркированном списке
• Как сделать нумерованный список html (<ol>)
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой
• Какой выбрать шрифт для сайта
• Коды символов для HTML
• Добавление социальных кнопок на сайт
• html цвета для сайта

← Перейти в каталог html уроков и советов