Списки, ссылки и т.д.
Сегодня рассмотрим сразу несколько возможностей HTML, которые также часто используются при вёрстке страниц. Начнём с локальной навигации по странице.
«Локальные» ссылки
Обычно ссылка указывает на другой адрес, но иногда нужно сделать навигацию по этой же странице. Для этого ссылка создаётся как обычно, только в атрибуте href следует указывать символ # с id-элемента, на который ссылаются.
<a href="#r1">Раздел 1</a> <a href="#r2">Раздел 2</a> <a href="#r3">Раздел 3</a> ... <div id="r1">...</div> ... <div id="r2">...</div> ... <div id="r3">...</div>
Стоит отметить, что id у любого элемента на странице должен быть уникальным, а также он должен начинаться с буквы, а не цифры. Это общие требования.Такая навигация может также указываться прямо в адресе:
https://site.com/home.html#r2
Браузер вначале загрузит всю страницу, а потом проскроллит её до блока r2.
Обычно же такая навигация используется в лендингах и располагается в шапке. Лендинги как правило длинные, поэтому такая навигация позволяет посетителю не только сразу видеть все главные разделы, но и быстро к ним перейти.
Часто применяется навигация для кнопки «наверх». Хотя чаще всего она делается на JavaScipt, но её без труда можно сделать и на HTML. Это обычный fixed-блок, который имеет иконку/надпись и в нём ссылка на id-самого верхнего элемента на странице, например #top.
Чтобы сделать скроллинг до блока более плавным, можешь использовать такие css-стили:
<style>
html {
scroll-behavior: smooth;
}
</style>
Это новое css-свойство ( scroll-behavior) уже неплохо поддерживается браузерами.
Списки
Списки чаще всего используют непосредственно для текста. Есть два варианта: обычный список (UL) и нумерованный (OL). Причём всё это также может настраиваться.
Посмотреть примеры обычных списков можно на странице Berry CSS. Изменение «булечки» зависит от дизайна самой страницы и отдаётся на откуп редактору текста.
Также иногда нужно уменьшить расстояние от левого края контейнера. Это можно сделать обычными margin/padding, но вот когда нужно указать нулевой отступ, то лучше использовать отдельный класс no-margin.
.no-margin {
padding-left: 0;
list-style-position: inside;
}
Это связано с тем, что в браузерах разные представления о «лучшем» отступе, поэтому предпочтительней использовать готовое css-свойство.
Другая частая потребность: нулевой отступ и отсутствие «булечки» (классы: no-bullet, list-unstyled). Возникает вопрос: зачем это вообще нужно, ведь тогда проще использовать обычные блочные тэги, например DIV или P?
Дело в том, что часто приходится работать с уже готовой html-разметкой, например какой-то сервис требует разместить ссылки именно в блоке UL/LI. Поэтому и приходится сбрасывать типовое отображение списка до обычного блока.
Для этих же целей используется класс list-inline. Он не только сбрасывает все отступы, но и делает все вложенные LI-элементы display: inline-block;, то есть они отображаются как обычные строчные тэги без переносов.
Списки определений DL/DT/DD
Эти три тэга используются в единой связке и формально относятся к спискам. Выглядит это так:
- Термин1
- Описание 1
- Термин2
- Термин3
- Описание 2 и 3
<dl>
<dt>Термин1</dt>
<dd>Описание 1</dd>
<dt>Термин2</dt>
<dt>Термин3</dt>
<dd>Описание 2 и 3</dd>
</dl>
Можно создавать разные комбинации этих тэгов.
Визуально эти блоки оформляются как и любые другие, но их используют из-за семантики: когда нужно составить глоссарий, список терминов с описаниями (ключ-значение) или короткий FAQ (вопрос-ответ).
Показ скрытой информации через DETAILS
Поддержка этого тэга появилась не так давно, поэтому в старых браузерах он может не работать. В целом DETAILS заменяет то, что раньше можно было сделать только с помощью JavaScript.
Details
Details
<details open>
<summary>Details</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>
<details>
<summary>Details</summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>
Браузер будет показывать SUMMARY, как «заголовок» блока, а его содержимое отобразится только после клика. Либо можно указать атрибут open, чтобы сразу открыть блок.
В Berry CSS есть примеры использования.
Таблицы
Это забавно: если бы этот курс был бы выпущен в начале 2000-х, то работа с таблицами была бы одним из первых уроков. Раньше почти вся вёрстка делалась именно на таблицах, поскольку только так можно было бы заставить браузер корректно расположить элементы модульной сетки. Сейчас для этого используется flex (и grid, но это сложней), поэтому таблицы используются только по своему прямому назначению.
Можно сказать, что дефолтное оформление таблиц у браузеров, мягко говоря так себе, поэтому в большинстве случаев сразу переопределяют их тэги: TABLET, TR, TD, TH и т.д. Для таблиц их придумано предостаточно, но скорее всего тебе будет достаточно знать лишь то, как правильно их указывать.
В Berry CSS есть примеры оформления таблиц, которых тебе хватит для большинства задач.
Горизонтальная линия HR
Тэг одиночный и очень простой для использования. Он просто создаёт горизонтальную линию и используется для визуального разделения блоков текста. К нему можно применять все те же классы, что и для обычных бордюров.
Иногда HR даже более предпочтителен, чем использование border, из-за того, что нет привязки к конкретному блоку. Если стоит задача сделать верхнюю и/или нижнюю границу, HR можно совершенно спокойно использовать. Единственный нюанс в том, что HR обычно имеет большие margin-отступы, поэтому нужно их обнулить (или указать желаемый) с помощь класса mar0.
Задания
1. Сделай новую страницу про космос, где использую тэги, описанные в этом уроке.
2. Попробуй сверстать обычный DIV блок с верхней и нижней границей с использованием HR.
3. Составь произвольную таблицу на несколько столбцов. Научись правильно задавать строки, столбцы и ячейки. Лишь после этого поиграй с оформлением. Обрати внимание, что таблицы очень плохо работают с адаптивным дизайном, поэтому обычно для их корректного отображения применяют горизонтальный скроллинг. Сделай такой пример с большим количеством столбцов (в Berry есть пример).