Добро пожаловать на девятый урок базового курса по HTML5!
Сегодня мы изучим один из самых часто используемых элементов веб-страниц — списки. Меню навигации, перечень преимуществ, шаги инструкции, характеристики товара — почти везде вы встретите списки. В HTML существует три основных типа списков, и каждый из них решает свою задачу. В этом уроке вы узнаете:
- как создавать ненумерованные (маркированные) списки,
- как делать нумерованные списки с разной нумерацией,
- что такое список определений и где он пригодится.
1. Ненумерованный список (маркированный список: <ul> и <li>)
Когда порядок элементов не важен, используют ненумерованный список. Перед каждым пунктом браузер ставит маркер (обычно кружок или точку).
<ul>
<li>Молоко</li>
<li>Хлеб</li>
<li>Яйца</li>
<li>Сыр</li>
</ul>
Результат на странице:
- Молоко
- Хлеб
- Яйца
- Сыр
Можно вкладывать списки друг в друга — это очень полезно для меню:
<ul>
<li>Фрукты
<ul>
<li>Яблоки</li>
<li>Бананы</li>
<li>Апельсины</li>
</ul>
</li>
<li>Овощи</li>
<li>Напитки</li>
</ul>
2. Нумерованный список: <ol> и <li>
Когда важен порядок или последовательность, используем нумерованный список.
<ol>
<li>Включить компьютер</li>
<li>Открыть браузер</li>
<li>Зайти на любимый сайт</li>
</ol>
Отобразится как:
- Включить компьютер
- Открыть браузер
- Зайти на любимый сайт
Полезные атрибуты для <ol> в HTML5:
<ol start="5">
<li>Пятый пункт</li>
<li>Шестой пункт</li>
</ol>
<ol reversed>
<li>Последний шаг</li>
<li>Предпоследний шаг</li>
<li>Первый шаг</li>
</ol>
Атрибут type (хотя сейчас чаще меняют стиль через CSS):
<ol type="A"> <!-- A, a, I, i, 1 -->
<li>Пункт A</li>
<li>Пункт B</li>
</ol>
3. Список определений: <dl>, <dt>, <dd>
Этот тип списка идеально подходит для глоссариев, характеристик товара, вопросов-ответов.
- <dl> — контейнер списка определений (definition list)
- <dt> — термин (definition term)
- <dd> — описание термина (definition description)
<dl>
<dt>HTML</dt>
<dd>Язык разметки гипертекста, на котором создаются веб-страницы.</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей — язык оформления веб-страниц.</dd>
<dt>JavaScript</dt>
<dd>Язык программирования, добавляющий интерактивность.</dd>
</dl>
Отображается так:
HTML
Язык разметки гипертекста, на котором создаются веб-страницы.
CSS
Каскадные таблицы стилей — язык оформления веб-страниц.
JavaScript
Язык программирования, добавляя интерактивность.
Очень удобно для карточек товаров:
<dl>
<dt>Объём памяти</dt>
<dd>256 ГБ</dd>
<dt>Экран</dt>
<dd>6,7 дюйма, OLED</dd>
<dt>Цвет</dt>
<dd>Чёрный космос</dd>
</dl>
Полный пример страницы со всеми тремя типами списков
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Урок 9 — Списки</title>
</head>
<body>
<h1>Рецепт сырников</h1>
<h2>Ингредиенты</h2>
<ul>
<li>Творог — 500 г</li>
<li>Яйцо — 1 шт.</li>
<li>Мука — 4 ст. л.</li>
<li>Сахар — 2 ст. л.</li>
</ul>
<h2>Приготовление (по шагам)</h2>
<ol>
<li>Смешать все ингредиенты</li>
<li>Сформировать шарики</li>
<li>Обвалять в муке</li>
<li>Обжарить с двух сторон до золотистого цвета</li>
</ol>
<h2>Пищевая ценность (на 100 г)</h2>
<dl>
<dt>Калории</dt>
<dd>220 ккал</dd>
<dt>Белки</dt>
<dd>14 г</dd>
<dt>Жиры</dt>
<dd>10 г</dd>
<dt>Углеводы</dt>
<dd>18 г</dd>
</dl>
</body>
</html>
Списки — незаменимый инструмент структурирования информации в HTML. Ненумерованные списки помогают перечислять элементы без привязки к порядку, нумерованные — показывать последовательность действий, а списки определений идеальны для пар «термин — описание». Теперь вы можете делать меню, инструкции, характеристики товаров и глоссарии семантически правильно и красиво. Попробуйте прямо сегодня создать свою страницу с разными типами списков — практика закрепит материал лучше всего!
0 Комментарий(я)
Зарегистрируйтесь чтобы оставить комментарий