Последнее обновление 15.01.2024 — Василий Иванов
Ключевые выводы
- Списки HTML необходимы для организации и представления данных на веб-странице. Существует три основных типа: упорядоченные, неупорядоченные и списки описаний.
- В упорядоченных списках для упорядочивания элементов используются цифры или другие символы. Атрибут type допускает настройку, а атрибуты start и reverted изменяют начальную позицию и порядок.
- Неупорядоченные списки группируют связанные элементы без определенного порядка. Стиль маркера можно настроить с помощью CSS.
Список HTML — это важный структурный элемент для любой группы связанных данных на веб-странице. Создаете ли вы меню, систематизируете товары на продажу или пытаетесь представить сложные данные в более удобочитаемой форме, следующие списки помогут вам выполнить эту работу.
Существует три основных типа списков HTML, каждый из которых служит определенной структурной цели в веб-разработке.
1. Упорядоченный список
Упорядоченный список HTML позволяет группировать список связанных элементов в определенном порядке. Чтобы создать новый упорядоченный список, вам нужно будет использовать тег
- . Тег
- . Каждый элемент списка (тег
- ) будет содержать определенный элемент списка.
<!-- Ordered list -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Этот код отображает следующее представление:
Обратите внимание, что типом упорядочения по умолчанию для упорядоченного списка являются числа, но вы можете изменить его с помощью атрибута type. Атрибут type дает вам возможность решить, какой элемент будет упорядочивать ваш список. У вас есть возможность использовать алфавит (прописные или строчные), цифры или римские цифры (прописные или строчные).
<!-- Ordered list -->
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Добавление атрибута type в тег
- отображает следующее обновленное представление:
- для каждого элемента списка:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Этот код отображает следующее представление:
Стиль маркера по умолчанию для неупорядоченного списка — диск. Раньше вы могли использовать атрибут type для установки стиля маркеров неупорядоченного списка. Однако атрибут типа неупорядоченного списка теперь является устаревшим атрибутом. Рекомендуемой альтернативой стилизации неупорядоченного списка является свойство CSS list-style-type.
<style>
ul { list-style-type: square; }
</style>Приведенный выше код обновляет представление следующим образом:
Свойство CSS list-style-type позволяет использовать коллекцию различных стилей маркеров, включая круги, пользовательские изображения, значки и символы. Благодаря CSS, который меняет расположение элементов списка, вы даже можете использовать неупорядоченные списки для создания панелей навигации.
Вложенные списки
Вложенный список — это элемент списка, который является частью другого списка. Вы можете создать вложенный список, используя комбинацию упорядоченных и/или неупорядоченных элементов списка. Эти структуры могут представлять более сложные иерархии.
<H3>Chicken Pasta Instructions</H3>
<ol>
<li>Boil pasta.</li>
<li>
Season chicken breast.
<ul>
<li>salt and pepper</li>
<li>paprika</li>
<li>garlic powder</li>
<li>Italian seasoning</li>
</ul>
</li>
<li>Heat olive oil in pot over medium-high heat.</li>
<li>Add chicken breast to pan and cook for 5 minutes.</li>
<li>Add heavy cream and parmesan cheese to empty pot.</li>
<li>Add pasta and slice chicken to cream sauce.</li>
</ol>Этот код отображает следующее представление:
3. Список описаний
Элемент списка описаний позволяет создать список терминов и связанных с ними подробностей. Тег
- позволяет создать новый список описаний, который следует использовать с элементами
- (термин описания) и
- (подробности описания).
<h3>Popular Laptops</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Provides up to 22 hours of battery life,
has an advanced camera, and a magic keyboard with touch ID.
</dd>
<dt>MSI GS76 Stealth</dt>
<dd>
A powerful gaming laptop with supercharged graphics and customized keys.
</dd>
</dl>Код выше отображает следующее представление:
Организуйте свой контент с помощью правильного списка HTML
Список HTML, который вы решите использовать в своем проекте веб-разработки, должен зависеть от контента, который вы хотите представить своим пользователям. Например, если вы хотите создать последовательный список, например шаги по приготовлению еды или выполнению задачи, то упорядоченный список — лучший вариант.
Однако если вы хотите сгруппировать связанную информацию, которая не требует ряда шагов (например, контрольный список), то более подходящим вариантом будет неупорядоченный список. Кроме того, если вы хотите создать глоссарий или список часто задаваемых вопросов, лучшим выбором будет список описаний.
Помимо атрибута type, с тегом
- можно использовать еще два атрибута: start и reverse.
Атрибут start позволяет начать оформление заказа с любой позиции, используя целочисленное значение. Например, если вы добавите start=»3″ в тег
- без указания типа, он начнет упорядочивать список с цифры три. Если вы назначите type=»a» или type=»I», порядок начнется с c или III соответственно.
<!-- Ordered list -->
<ol type="I" start="3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Код выше отображает следующее представление:
Атрибут Reversed позволяет изменить порядок списка. Он принимает логическое значение, а его значение по умолчанию — false.
<!-- Ordered list -->
<ol reversed="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Этот код выдает в браузере следующий вывод:
2. Неупорядоченный список
Неупорядоченный список позволяет группировать связанные элементы, порядок которых не имеет значения. По умолчанию браузер использует маркер для обозначения каждого элемента.
Чтобы создать новый неупорядоченный список, вам нужно будет использовать тег
- в качестве родительского элемента и тег
- для каждого элемента списка:
- группирует и содержит теги
