0Pricing
HTML Academy · Урок

Неупорядоченные списки: ul и li

Создавайте маркированные списки с помощью элементов ul и li

«Неупорядоченные списки: ul и li» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое неупорядоченный список

Неупорядоченный список отображает элементы с маркерами points — порядок не имеет значения:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Элемент ul

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

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Оформление маркеров с помощью CSS

Управляйте маркерами списка с помощью CSS:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Навигация в виде ul

Меню навигации с семантической точки зрения является списком ссылок:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li может содержать любое содержимое

Элементы списка могут содержать любое потоковое содержимое:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Строчные списки

Отображайте элементы списка по горизонтали с помощью CSS:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Семантическое использование ul

Распространённые варианты семантического использования неупорядоченных списков:

  • Меню навигации
  • Списки возможностей
  • Облака тегов
  • Связанные ссылки
  • Списки ингредиентов в рецептах

ul и p для нескольких элементов

Если у вас есть несколько связанных элементов, список семантически лучше, чем отдельные абзацы:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Маркеры списка с помощью list-style-image

Используйте собственное изображение в качестве маркера списка:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Сокращённая запись list-style

Сокращённая запись list-style задаёт тип, положение и изображение:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Доступность

Примечания о доступности списков:

  • Средства чтения с экрана объявляют тип списка и количество элементов
  • Использование list-style: none может привести к тому, что некоторые средства чтения с экрана перестанут объявлять его как список — добавьте role="list", чтобы сохранить семантику
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Быстрая проверка

Какой элемент является единственным допустимым непосредственным дочерним элементом ul?

Повторение: неупорядоченные списки

Основные сведения о неупорядоченных списках:

  • <ul> содержит список, в котором порядок не имеет значения
  • <li> — единственный допустимый непосредственный дочерний элемент
  • Маркер по умолчанию: disc; изменяется с помощью list-style-type
  • Меню навигации с семантической точки зрения являются списками ссылок <ul>
  • Добавьте role="list", если удаляете маркеры с помощью CSS

Часто задаваемые вопросы

Урок «Неупорядоченные списки: ul и li» бесплатный?

Да — полный текст урока «Неупорядоченные списки: ul и li» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Неупорядоченные списки: ul и li»?

Создавайте маркированные списки с помощью элементов ul и li Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Неупорядоченные списки: ul и li»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Неупорядоченные списки: ul и li
  2. Упорядоченные списки: ol, start, reversed и type
  3. Списки описаний: dl, dt и dd
  4. Вложенные списки и стилизация списков
← Назад к HTML Academy