Во что вкладывать тег ul

Во что вкладывать тег ul

Добавляет на страницу неупорядоченный маркированный список.

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как понять
4. Подсказки
5. На практике
   1. Денис Ежков советует

   Обновлено 2 ноября 2022

   Кратко

   Скопировать ссылку на секцию «Кратко» Скопировано

   Если нам нужно сверстать перечень однотипных элементов, порядок которых неважен, мы будем использовать тег неупорядоченного списка <ul> . Частный случай неупорядоченного списка — маркированный список.

   Пример

   Скопировать ссылку на секцию «Пример» Скопировано

   Как понять

   Скопировать ссылку на секцию «Как понять» Скопировано

   Тег <ul> является своеобразной обёрткой, указывающей браузеру на начало и конец списка. Сами пункты списка размечаются при помощи тега <li> . Таким образом, полностью список верстается с использованием обоих этих тегов:

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

   Подсказки

   Скопировать ссылку на секцию «Подсказки» Скопировано

   �� Вложенным может быть как неупорядоченный список <ul> , так и упорядоченный список <ol> .

   �� Дочерними тегами обязательно должны быть <li> , в которые уже могут быть вложены любые другие теги.

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

   Бывают ситуации, когда порядок важен. Например, перечисление популярных статей по убыванию количества комментариев. В этом случае выбираем <ol> .

   На практике

   Скопировать ссылку на секцию «На практике» Скопировано

   Денис Ежков советует

   Скопировать ссылку на секцию «Денис Ежков советует» Скопировано

   �� Неупорядоченным списком на сайтах, как правило, верстается навигация, рубрикаторы, пагинация, кнопки соцсетей в подвале и другие перечни однотипных элементов:

   Во что вкладывать тег ul

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

   Каждый пункт списка должен начинаться с элемента <li> .

   Синтаксис¶

   Закрывающий тег обязателен.

   Атрибуты¶

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

   • circle
   • disc
   • square
   • Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его: triangle .

   Если этот элемент отсутствует, и если к элементу не применяется свойство CSS list-style-type , пользовательский агент выбирает тип маркера в зависимости от уровня вложенности списка.

   HTML тег <ul>

   Тег <ul> используется для создания маркированного (неупорядоченного) списка, где изменение порядка следования пунктов существенно не меняет его смысл.

   Каждый элемент в маркированном списке должен быть вложен в тег <li>. В случае, если к списку применены CSS стили, содержимое тега <li> также принимает их.

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

   По умолчанию, маркированные списки отображаются на веб-странице в виде списка и начинаются с маленького чёрного круга и небольшим отступом от левого края.

   Для создания нумерованных списков используется тег <ol>.

   Синтаксис

   Содержимое элемента заключается между открывающим (<ul>) и закрывающим (</ul>) тегами.

   Пример

   Результат

   Установленный по умолчанию маркер элементов (черный кружок) можно изменить при помощи атрибута type .

   Пример

   Результат

   

   Для изменения типа маркера можно использовать CSS свойства list-style-type или list-style-image .

   <ul> — элемент «Неупорядоченный список»

   HTML-элемент <ul> используется для неупорядоченного списка — в частности для маркированного списка.

   Интерактивный пример

   Категории контента (en-US)	Основной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент <li> , явный контент.
   Допустимое содержимое	Ноль или больше <li> элементов, содержат вложенные элементы <ol> или <ul> .
   Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
   Допустимые родители	Любой элемент, который принимает основной поток.
   Допустимые ARIA-роли	directory (en-US) , group (en-US) , listbox (en-US) , menu (en-US) , menubar (en-US) , radiogroup (en-US) , tablist (en-US) , toolbar (en-US) , tree (en-US) , presentation (en-US)
   DOM-интерфейс	HTMLUListElement (en-US)

   Свойства

   Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от user agent и не работает со всеми браузерами.

   Предупреждение: Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте CSS. Для схожего эффекта с compact , подойдёт свойство CSS line-height с значением 80% .

   Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:

   • circle
   • disc
   • square Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: triangle .Если данный атрибут отсутствует и если атрибут CSSlist-style-type (en-US) не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.

   Предупреждение: Не используйте этот атрибут, ибо он устаревший; используйте свойство CSS list-style-type (en-US).

   Читать:

   Почему барабан стиральной машины трется об манжету