Правильная структура HTML: <h1><a>...</a></h1> или <a><h1>...</h1></a>

Быстрый ответ

Чтобы сделать заголовок <h1> кликабельным, рекомендуется поместить его внутрь тега <a>:

<a href="ваша-ссылка-здесь">
  <h1>Ваш заголовок</h1>
</a>

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

Якорь, заголовок и семантика

Теги <h1> и <a> выполняют различные функции — первый обеспечивает структуру и важность контента, второй управляет навигацией. Путем вложения <h1> в <a>, мы повышаем удобство взаимодействия с пользователем, особенно на устройствах с сенсорным управлением, и оптимизируем сайт для поисковиков.

HTML5: преодоление границ между inline и block

HTML5 позволяет вкладывать блочные элементы в строчные, тем самым допуская возможность оформления инлайнового элемента <a> блочного элемента <h1>. Это снимает ограничения предыдущих версий HTML, упрощая разработку.

Доступность: каждый клик важен

Тег <a> является фокусируемым и делает его удобным для навигации с помощью клавиатуры. Его сочетание с <h1> улучшает доступность веб-контента.

Визуализация

HTML-структура схожа с зданием: <h1> — это крыша, обеспечивающая защиту, а <a> — дверь, через которую мы входим.

Правильное вложение — когда крыша (🔝) находится над дверью (🚪):

🏠
🔝<h1>🚪<a>Добро пожаловать!</a></h1>
# <h1> защищает <a>, как крыша над входом.

Неправильное вложение — когда дверь (🚪) удерживает крышу (🔝):

🏠
🚪<a>🔝<h1>Добро пожаловать!</h1></a>
# <a> включает <h1>, словно дверь подпирает крышу.

Идеальное вложение для цельности структуры и семантики:

🔝<h1>🚪<a>Добро пожаловать домой!</a></h1>🔝 – Надёжно и осмысленно.

Тщательное построение HTML-структуры обеспечивает её семантическую чистоту.

История HTML: взгляд в прошлое

Предшественники HTML5 не рекомендовали вкладывать блочные элементы внутри строчных. Однако HTML5 изменил эти правила, предоставив разработчикам больше возможностей.

Лучшие практики: осознанный выбор между <h1><a>...</a></h1> и <a><h1>...</h1></a>

Когда использовать <h1><a>...</a></h1>

• Если нужно сделать кликабельной только часть заголовка.
• Когда ссылка в заголовке добавляет контекст.

Подробнее об этом расскажет наш спикер на видео

Используйте <a><h1>...</h1></a>, когда

• Желательно, чтобы весь заголовок был интерактивным.
• Заголовок функционирует как «портал» в определенный раздел сайта.

Чего следует избегать

• Избыточное использование <h1> негативно сказывается на структуре и SEO.
• Предлагайте валидный href и обеспечьте возможность фокусировки, чтобы не усложнять навигацию.

Советы для дополнительного качества

• С помощью CSS можно придать тексту в <h1> кликабельный вид, сохраняя при этом гармоничность дизайна.
• Выполняйте проверку своего HTML с помощью инструментов валидации, таких как W3C Markup Validation Service.

Полезные материалы

1. HTML-стандарт — детальная информация об элементе <a>.
2. Элемент якоря — HTML | MDN — инструкция по использованию тега <a> от MDN.
3. "Блочные" ссылки в HTML5 | HTML5 Doctor — обсуждение блочных ссылок в контексте HTML5.
4. Служба валидации разметки W3C — для проверки корректности HTML.
5. Can I use... Сupport tables for HTML5, CSS3, and others — таблицы совместимости функций для проверки перед внедрением нововведений.