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



Примечание 1

В 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 — маркер в виде списка греческим алфавитом большими буквами






Примечание 2

Атрибут можно назначить как самому тегу <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 уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.