Результаты поиска: заголовки, отрывки и понятные ссылки

Назначение

Список результатов поиска должен помогать выбрать материал по названию и короткому контексту. Отрывок дополняет ссылку, а не повторяет одну и ту же рекламную подпись во всех пунктах.

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

Используйте упорядоченный список, если порядок результатов значим. У каждого пункта есть заголовок со ссылкой и пояснение. В демонстрации ссылки ведут к локальным разделам, чтобы не требовать работающего поискового сервера.

Пример

<style>.results{padding-inline-start:1.5rem}.results li{margin-block:1.2rem}.results h3{margin:0 0 .35rem}.results p{margin:0;max-width:65ch}</style>
<section aria-labelledby="results-title"><h2 id="results-title">Найдено два учебных примера</h2><ol class="results">
<li><h3><a href="#form-lesson">Подписи полей формы</a></h3><p>Связь label и input и проверка нажатия по подписи.</p></li>
<li><h3><a href="#grid-lesson">Сетка карточек</a></h3><p>Изменение количества колонок при узком окне.</p></li></ol></section>
<h2 id="form-lesson">Пример формы</h2><h2 id="grid-lesson">Пример сетки</h2>

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

Посетитель видит количество результатов и может пройти осмысленные ссылки клавиатурой. Текст отрывков не становится дополнительным набором одинаковых ссылок «Подробнее».

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

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

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

Подставьте длинное название и отрывок из нескольких строк. Проверьте узкое окно и список заголовков. Затем подготовьте отдельный вариант для нулевого результата с объяснением, как изменить запрос.

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

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

• Клавиатура
• Подписи
• Адаптивность