Практика: группы ссылок в подвале страницы

Назначение

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

Как это работает

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

Пример

<style>.footer-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem}.footer-groups ul{padding-left:1.2rem}.footer-groups a{display:inline-block;padding:.3rem 0}</style>
<section id="lessons"><h2>Уроки</h2><p>Учебные материалы.</p></section><section id="help"><h2>Помощь</h2><p>Ответы на вопросы.</p></section>
<footer><nav aria-label="Ссылки в подвале" class="footer-groups"><section><h2>Обучение</h2><ul><li><a href="#lessons">Все уроки</a></li></ul></section><section><h2>Поддержка читателя</h2><ul><li><a href="#help">Как пользоваться справочником</a></li></ul></section></nav></footer>

Что должно получиться

Группы располагаются рядом при достаточной ширине и переносятся при её нехватке. Порядок чтения и переходов по ссылкам совпадает с порядком в HTML.

Граница применения и частая ошибка

Не дублируйте десятки одинаковых ссылок ради объёма подвала. Названия должны объяснять назначение перехода. Уровни заголовков подберите под целую страницу, а не только под изолированный фрагмент песочницы.

Самостоятельная проверка

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

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

Связанные материалы

• Подпись поля
• Сетка
• Клавиатура