Html ul: Тег | htmlbook.ru

Leave a Comment / Html / By /

— HTML — Дока

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

Кратко

Скопировано

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

Пример

Скопировано

<ul>  <!-- Содержимое --></ul>
          <ul>
  <!-- Содержимое -->
</ul>

Как понять

Скопировано

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

<ul>  <li>Молоко</li>  <li>Хлеб</li></ul>
          <ul>
  <li>Молоко</li>
  <li>Хлеб</li>
</ul>

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

<ul>  <li>Молоко</li>  <li>    Хлеб    <!-- В этот пункт вложен еще один полноценный список: -->    <ul>      <li>Белый</li>      <li>Ржаной</li>    </ul>  <!-- Закрывающий тег родительского пункта: -->  </li></ul>
          <ul>
  <li>Молоко</li>
  <li>
    Хлеб
    <!-- В этот пункт вложен еще один полноценный список: -->
    <ul>
      <li>Белый</li>
      <li>Ржаной</li>
    </ul>
  <!-- Закрывающий тег родительского пункта: -->
  </li>
</ul>

Подсказки

Скопировано

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

<ul>  <li>Сходить в магазин</li>  <li>    Посетить врачей:    <ol>      <li>Терапевт</li>      <li>Офтальмолог</li>      <li>Отоларинголог</li>    </ol>  </li>  <li>Позвонить маме</li></ul>
          
 <ul>
  <li>Сходить в магазин</li>
  <li>
    Посетить врачей:
    <ol>
      <li>Терапевт</li>
      <li>Офтальмолог</li>
      <li>Отоларинголог</li>
    </ol>
  </li>
  <li>Позвонить маме</li>
</ul>

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

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

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

На практике

Скопировано

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

Скопировано

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

<ul>  <li>    <a href="/page1">1</a>  </li>  <li>    <a>2</a>  </li>  <li>    <a href="/page3">1</a>  </li></ul>
          <ul>
  <li>
    <a href="/page1">1</a>
  </li>
  <li>
    <a>2</a>
  </li>
  <li>
    <a href="/page3">1</a>
  </li>
</ul>

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так.

Попробуйте ещё раз?

←

<ol>

ctrl + alt + ←

→

<li>

ctrl + alt + →

Тег | HTML справочник

HTML теги

Значение и применение

Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).

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

Поддержка браузерами

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<ul>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
compactcompactНе поддерживается в HTML5.
Указывает, что список должен быть меньше обычного размера (line-height: 80%).
typedisc
square
circle		Не поддерживается в HTML5.
Определяет вид маркера для использования в списке.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <ul></title>
	</head>
	<body>
		<ul>
			<li>Светлое</li>
			<li>Тёмное</li>
			<li>Пятница</li>
		</ul>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

  • Светлое
  • Тёмное
  • Пятница

Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:

АтрибутЗначение
list-style-type:noneУбирает маркер.
list-style-type:discМаленький черный круг. Это значение по умолчанию.
list-style-type:circleКруг пустой внутри.
list-style-type:squareМаркер в виде квадрата.

Ниже приведен пример использования стилей CSS внутри маркированного списка:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример изменения типа маркера маркированного списка</title>
	</head>
	<body>
		<ul style = "list-style-type:none">  <!-- маркер отсутствует -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:disc">  <!-- маленький черный круг -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:circle">  <!-- круг пустой внутри -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:square">  <!-- маркер в форме квадрата -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>		
	</body>
</html>

Результат нашего примера:

Маркированные списки.

Отличия HTML 4.01 от HTML 5

В HTML5 удалены атрибуты compact и type.

Значение CSS по умолчанию

  ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
padding-left: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег HTML »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент
Списки наводят порядок на веб-страницах: вот HTML-код для их создания
Что делает
    HTML-тег ?
Элемент
    используется для определения неупорядоченного списка элементов. Используйте неупорядоченный список, чтобы содержать элементы
  • , которые не обязательно должны быть представлены в числовом порядке и могут быть переупорядочены без изменения значения списка.
Дисплей
Блок
Использование
Семантика

Содержимое

  • 1 Пример кода
  • 2 Все списки
    • 9 0031 3 Списки элементов, порядок которых не имеет значения
  • 4 Атрибуты HTML-тега

      Пример кода 

       
      Элементы неупорядоченного списка:
      
<ул>
  
    • В любом порядке
      • 
  
    • По-прежнему имеет смысл
      •

    Элементы ненумерованного списка:

    • В любом порядке
    • Все равно будет иметь смысл

    Все о списках

    Возможно, вы этого не знаете, но веб-разработчики любят списки. Они используют их все время. Как сами веб-разработчики, мы взяли на себя обязательство предоставить обширный учебник по спискам, который охватывает все основы: неупорядоченные списки, упорядоченные списки, списки определений, списки обратного отсчета, вложенные списки — и даже затрагивает некоторые дополнительные темы.

    Прочитайте наш учебник по спискам, чтобы узнать почти все, что нужно знать о списках HTML.

    Списки элементов, порядок которых не имеет значения

    Веб-разработчикам доступно два основных типа списков: упорядоченные списки и неупорядоченные списки. Если порядок элементов в списке имеет значение, используйте упорядоченный список. Если порядок элементов в списке не имеет значения, используйте неупорядоченный список.

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

    Это ошибка.

    Маркер элемента списка можно изменить с помощью CSS, но семантическое значение, передаваемое выбором типа списка, нельзя изменить с помощью CSS.

    Например:

     
    Вы можете использовать числа в качестве маркера элемента списка для неупорядоченного списка, используя простой CSS:
    
<ул>
  
  • Это элемент
    • 
  
  • Это элемент
    • 
  
  • Ищете товар? Вы нашли его!
    • 

<стиль>
  . нумерованный {
    тип-списка: десятичный;
  }

    Вот как этот список отображается в браузере:

    Адам Вуд

    Адам — технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.

    Атрибуты HTML-тега

      Имя атрибута Значения Примечания

        9 0093
      		 Используется для установки типов списков.

      Поиск HTML.com

      Искать:

      Самые популярные

      • HTML-тег
      • HTML-элемент P: вот код для определения текста абзаца

        ul HTML — W3schools

        HTML Тег

          Как следует из самого названия, все элементы списка по умолчанию отмечены маркерами в маркированном списке. Он широко известен как неупорядоченный список HTML и, следовательно, начинается с тега

            . Элементы списка в неупорядоченном списке HTML начинаются с тега
          • .

            Специфические атрибуты тега:

            9 0094
            Атрибут Значение Использование
            компактный компактный Используется для указания того, что список будет отображаться меньше, чем обычно. Не поддерживается в HTML5.
            тип диск

            квадрат

            круг

            		 Используется для указания типа маркера, который будет использоваться в списке. Не поддерживается в HTML5.

            Глобальные атрибуты:

            Глобальные атрибуты HTML поддерживаются тегом HTML

              .

              Атрибуты события:

              Атрибуты события HTML поддерживаются тегом HTML

                .

                Поддерживаемые браузеры:

                Chrome, IE, Firefox, Opera и Safari.

                Пример: Введите «диск» 

                 

<тело>
 
                Неупорядоченный список HTML или маркированный список
                 
<ул>
  
              • Имя
                • 
  
              • Возраст
                • 
  
              • Адрес
                •

                Вывод:

                Объяснение:

                В приведенном выше Например, мы создали неупорядоченный или маркированный список типа по умолчанию в HTML, содержащий три элемента.

                Пример: Введите «circle» 

                 

<тело>
 
                Неупорядоченный список HTML или маркированный список
                 
<тип ul = "круг">
  
              • Имя
                • 
  
              •  
                Возраст
                • 
  
              • Адрес
                •

                Вывод:

                Объяснение:

                В приведенном выше Например, мы создали неупорядоченный или маркированный список типа «круг» в HTML, содержащий три элемента.

                Пример: Введите «квадрат» 

                 

<тело>
 
                Неупорядоченный список HTML или маркированный список
                 
<тип ul = "квадрат">
  
              • Имя
                • 
  
              • Возраст
                • 
  
              • Адрес
                •

                Вывод:

                Объяснение:

                В приведенном выше Например, мы создали неупорядоченный или маркированный список типа «квадрат» в HTML, содержащий три элемента.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *