Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Списки Основы верстки контента

Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:

  • Маркированные;
  • Нумерованные;
  • Списки определений.

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

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

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

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

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul> — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li> — сокращение от List Item. Так браузер отделяет списки друг от друга.

Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега <li></li>. Внутри каждого из этих тегов помещается один пункт списка.

<ul>
  <li>Маркированные;</li>
  <li>Нумерованные;</li>
  <li>Списки определений.</li>
</ul>

Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега <li></li>. Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

<h1>Теги в HTML</h1>
<ul>
  <li>Параграфы</li>
  <li>
    Списки
    <ul>
      <li>Маркированные;</li>
      <li>Нумерованные;</li>
      <li>Списки определений.</li>
    </ul>
  </li>
</ul>

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

Нумерованные списки

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

Нумерованный список использует контейнер <ol></ol>, в качестве пунктов списков используется тег <li></li>. Тег <ol> — сокращение от Ordered List. Примером такого списка может служить список дел на день.

<h1>Список дел на вторник</h1>
<ol>
  <li>Позавтракать</li>
  <li>Оплатить билет на метро</li>
  <li>Съездить к бабушке</li>
  <li>Лечь спать</li>
</ol>

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

<h1>Список дел на вторник</h1>
<ol>
  <li>Позавтракать</li>
  <li>Оплатить билет на метро</li>
  <li>
    Съездить к бабушке
    <ul>
      <li>Купить цветы</li>
      <li>Купить конфеты</li>
    </ul>
  </li>
  <li>Лечь спать</li>
</ol>

Списки определений

С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

В качестве контейнера для списков определений используется тег <dl></dl> от английского Definition List, внутри которого не привычная схема <li></li>, а система из двух тегов:

  1. <dt></dt> — термин. От английского Definition Term;
  2. <dd></dd> — определение. От английского Definition Description.

Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:

<dl>
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки</dd>
  <dt>CSS</dt>
  <dd>Каскадные таблицы стилей</dd>
</dl>

Стилизация списков

Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type. Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square.

Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none.

Изменять маркер можно одним из двух способов:

  • Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
  • Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.

В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.

Картинка в качестве маркера списка

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

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

.list-image {
  list-style-image: url("./good.png");
}

Важно: вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»