HTML тег <ul>

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

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

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

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

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

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

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

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

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

Атрибуты тега <ul>

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

• type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше
• 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

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

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

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

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

<ul type="circle"> <li>Элемент #1</li> <li 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>, он распространяется на все элементы списка.