Указатель терминов: быстрые переходы по начальным буквам
Небольшой буквенный указатель ускоряет переход к разделам длинного словаря. Он должен использовать настоящие ссылки и существующие заголовки, а не только декоративные буквы.
Назначение
Небольшой буквенный указатель ускоряет переход к разделам длинного словаря. Он должен использовать настоящие ссылки и существующие заголовки, а не только декоративные буквы.
Как это работает
Nav получает имя, ссылки ведут к уникальным id секций. Flex-wrap позволяет указателю переноситься. Для демонстрации показаны только три буквы, которым действительно соответствуют разделы ниже.
Пример
<style>.letters{display:flex;flex-wrap:wrap;gap:.5rem}.letters a{padding:.5rem .8rem;border:1px solid #8ca895}.term-group{scroll-margin-top:1rem}</style>
<nav class="letters" aria-label="Начальные буквы терминов"><a href="#terms-a">А</a><a href="#terms-b">Б</a><a href="#terms-v">В</a></nav>
<section class="term-group" id="terms-a"><h2>А</h2><p>Атрибут — дополнительная характеристика HTML-элемента.</p></section>
<section class="term-group" id="terms-b"><h2>Б</h2><p>Браузер — программа для работы с веб-страницами.</p></section>
<section class="term-group" id="terms-v"><h2>В</h2><p>Вёрстка — построение представления страницы.</p></section>Что должно получиться
Ссылки меняют фрагмент URL и прокручивают страницу к соответствующим разделам. Основной словарь остаётся обычным последовательным документом без зависимости от JavaScript.
Граница применения и частая ошибка
Не делайте активными ссылки на пустые или отсутствующие буквы. Если есть закреплённая шапка, проверьте, не закрывает ли она заголовок назначения. Короткие учебные определения требуют уточнения при использовании в специализированном контексте.
Самостоятельная проверка
Добавьте новую букву вместе с разделом и проверьте прямое открытие адреса с фрагментом. Пройдите указатель клавиатурой. Если словарь большой, оцените, нужны ли понятные ссылки возврата к указателю.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.