Неупорядоченные списки HTML

Неупорядоченные списки HTML( <ul> ) — это фундаментальный способ отображения коллекции элементов без акцентирования их порядка. Каждый элемент списка представлен элементом <li> (элемент списка), и по умолчанию элементы обычно отображаются с маркерами.

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

Обзор списков можно найти в статье Списки HTML .

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

Неупорядоченный список — это набор элементов, порядок которых не имеет значения. Такие списки идеально подходят для отображения таких данных, как списки покупок, описания функций или навигационные ссылки.

Структура неупорядоченного списка состоит из элемента <ul> и вложенных элементов <li> :

Копировать<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

Атрибуты элемента <ul>

Элемент <ul> поддерживает атрибуты, которые могут улучшить или изменить его поведение:

• Глобальные атрибуты: для настройки списка доступны такие атрибуты, как id , class и style .
• Атрибуты ARIA: такие атрибуты, как aria-label или aria-labelledby могут сделать неупорядоченные списки более доступными.
• Пользовательские атрибуты данных: используйте атрибуты data-* для хранения пользовательской информации, связанной со списком.

Стилизация неупорядоченных списков с помощью CSS

Неупорядоченные списки можно оформить в соответствии с вашими требованиями к дизайну. Вы можете изменить стиль маркеров, удалить маркеры или настроить интервалы. Вот несколько распространённых приёмов:

1. Изменение стилей маркеров

Свойство list-style-type позволяет изменить стиль маркера:

Копировать<style>
  ul {
    list-style-type: square; /* Options: disc, circle, square, none */
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Обычные значения для list-style-type включают disc (по умолчанию), circle , square и none (удаляет маркеры).

2. Удаление пуль

Чтобы удалить пули, установите list-style-type в none :

Копировать<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

3. Настройка отступов

Вы можете настроить отступ элементов списка с помощью padding и margin :

Копировать<style>
  ul {
    padding-left: 20px; /* Increase or decrease indentation */
  }
</style>

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

4. Добавление пользовательских маркеров

Чтобы использовать пользовательские изображения или значки в качестве маркеров, используйте свойство list-style-image :

Копировать<style>
  ul {
    list-style-image: url('custom-bullet.png');
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Такой подход позволяет создавать более креативные проекты.

Вложенные неупорядоченные списки

Неупорядоченные списки можно вкладывать друг в друга, создавая иерархические структуры. Например:

Копировать<ul>
  <li>Parent Item 1
    <ul>
      <li>Child Item 1.1</li>
      <li>Child Item 1.2</li>
    </ul>
  </li>
  <li>Parent Item 2</li>
</ul>

Вложенные элементы <ul> создают многоуровневую структуру, каждый из которых по умолчанию имеет отступ.

Вопросы доступности

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

• Используйте семантический HTML: всегда используйте <ul> для неупорядоченных списков, а не div или span.
• Предоставьте контекст: используйте описательный текст или заголовки для представления списков.
• Поддержка программ чтения с экрана: добавьте aria-label или aria-labelledby чтобы описать назначение списка.

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

• Навигационные меню: создание навигационных ссылок для веб-сайтов.
• Списки характеристик: выделите особенности продукта или сведения об услуге.
• Часто задаваемые вопросы: представьте список часто задаваемых вопросов.
• Списки задач: отображение списков дел или пунктов действий.

Лучшие практики использования неупорядоченных списков

• Делайте списки короткими: длинные списки могут утомить пользователей; рассмотрите возможность группировки элементов.
• Используйте единообразное форматирование: убедитесь, что все элементы списка соответствуют одному и тому же грамматическому стилю.
• Сделайте списки читабельными: используйте маркеры, пробелы и выравнивание для улучшения читаемости.
• Используйте CSS для стилизации: избегайте встроенных стилей и используйте внешний или внутренний CSS для настройки.

Заключение

Неупорядоченные списки HTML используются для отображения наборов элементов. Неупорядоченные списки обеспечивают простую, но эффективную структуру, будь то разработка навигационного меню, демонстрация функций или организация контента. Понимая их атрибуты, методы стилизации и особенности доступности, вы сможете эффективно использовать неупорядоченные списки для улучшения своих веб-страниц.