Списки в ХТМЛ имеют важное значение. С их помощью при создании веб-страниц формируют многие важные элементы страницы, например меню или сайдбар с виджетами. Каждый уважающий себя верстальщик умеет пользоваться списками и другими возможностями HTML.
До сих пор идут споры, является ли HTML полноценным языком программирования. Кто-то считает что «нет», а кто-то, что «да». При этом сложно не заметить, что HTML в совокупности с CSS творит веб-чудеса. Только этими двумя инструментами можно создать полноценный веб-сайт с несложной функциональностью. Чтобы такое делать, нужно тщательно изучать эти технологии и понимать, где и что можно правильно применить.
Сегодня мы расскажем что такое списки ХТМЛ, чтобы вы могли их применять в веб-разработке.
Списки ХТМЛ
HTML-списки — это контейнеры, которые используют для того, чтобы сгруппировать несколько элементов, связанных между собой. Списки ХТМЛ представлены тремя видами:
Неупорядоченный или маркированный HTML-список. Такой список определяется тегами «ul», а каждый отдельный элемент определяется тегом «li». Мы все видели такие списки. Как правило, элементы этого списка начинаются с «точки» или какого-то другого специального знака, но не числа.
Нумерованный HTML-список. Такой список определяется тегами «ol», а каждый отдельный элемент определяется тегом «li». Мы все видели такие списки. Как правило, элементы такого списка начинаются с числа и перечисляются по порядку. Причем перечисление элементов может происходить обычными или «римскими» цифрами.
HTML -список определений. Такой список определяется тегами «dl», а элементы определяются тегами: «dt» — отвечает за термин и «dd», который отвечает за определение термина. Такие списки встречаются реже, поэтому не все их видели.
Каждый отдельный список — это отдельный контейнер. Каждый отдельный элемент списка ведет себя как отдельный контейнер, который занимает всю ширину родительского контейнера. Таким образом, создавая список, мы имеем конструкцию «контейнеры в контейнере» или «блоки в блоке». Повлиять на отображения всего ХТМЛ-списка или его отдельного элемента можно при помощи классов и идентификаторов CSS.
Как формируются ХТМЛ-списки?
В принципе, все ХТМЛ-списки формируются одинаково. Чтобы их научиться формировать, нужно понять конструкцию и алгоритм.
Неупорядоченный HTML-список в коде формируется так:
<ul>
<li>Дормидонт Платонович</li>
<li>Никифор Аристархович</li>
<li>Первомай Виссарионович</li>
<li>Афродита Владленовна</li>
</ul>
В браузере этот же список будет выглядеть так:
Дормидонт Платонович
Никифор Аристархович
Первомай Виссарионович
Афродита Владленовна
Нумерованный HTML-список в коде формируется так:
<оl>
<li>Дормидонт Платонович</li>
<li>Никифор Аристархович</li>
<li>Первомай Виссарионович</li>
<li>Афродита Владленовна</li>
</оl>
В браузере этот же список будет выглядеть так:
Дормидонт Платонович
Никифор Аристархович
Первомай Виссарионович
Афродита Владленовна
HTML-список определений в коде формируется так:
<dl>
<dt>Генеральный директор:</dt>
<dd>Дормидонт Платонович</dd>
<dt>Директор по развитию:</dt>
<dd>Никифор Аристархович</dd>
<dt>Исполнительный директор:</dt>
<dd>Первомай Виссарионович</dd>
<dt>PR-менеджер:</dt>
<dd>Афродита Владленовна</dd>
</dl>
В браузере этот же список будет выглядеть так:
Генеральный директор:
Дормидонт Платонович
Директор по развитию:
Никифор Аристархович
Исполнительный директор:
Первомай Виссарионович
PR-менеджер:
Афродита Владленовна
В качестве элементов списка может выступать что угодно:
- текст;
- пустые строки;
- ссылки;
- изображения;
- другие списки;
- и др.
Кстати, если в роли элемента одного списка выступает другой список, тогда список называется вложенным.
Вложенный HTML-список в коде выглядит вот так:
<ul>
<li>Раздел 1</li>
<li>Раздел 2</li>
<ul>
<li>Подраздел 2.1</li>
<li>Подраздел 2.2</li>
<ul>
<li>Подраздел 2.2.1</li>
<li>Подраздел 2.2.2</li>
</ul>
</ul>
<li>Раздел 3</li>
</ul>
В браузере этот же список будет выглядеть так:
- Раздел 1
- Раздел 2
- Подраздел 2.1
- Подраздел 2.2
- Подраздел 2.2.1
- Подраздел 2.2.2
- Раздел 3
Заключение
Как видно из статьи, списки ХТМЛ формируются достаточно просто. Для того чтобы их стилизовать на свой вкус, обязательно используйте возможности CSS.
Web