Что такое ul

Что такое ul

HTML тег <ul>

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

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

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

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

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

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

Что может являться содержимым маркированного списка?

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

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

Допускается вложения «список в списке»

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

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

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

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

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

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

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

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

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

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

Рассмотрим какие значения может принимать 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> все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:

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

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

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

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

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

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

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

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

HTML тег <ul>

Элемент <ul> (от англ. «unordered list» ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент <ul> применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.

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

Пункты для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: Если к <ul> применяется CSS свойство, то элементы <li> наследуют эти свойства.

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image , позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег <ol>.

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <ul> со следующими значениями CSS по умолчанию:

Что такое ul

Элемент <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный список. Каждый пункт списка должен начинаться с элемента <li>.

Синтаксис

Закрывающий тег

Атрибуты

Также для этого элемента доступны универсальные атрибуты и события.

Пример

Результат данного примера показан на рис. 1.

Вид маркированного списка в браузере

Рис. 1. Вид маркированного списка в браузере

Спецификация

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5 Рекомендация
HTML 4.01 Specification Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

1 12 1 1 1 1
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Ссылка на основную публикацию