Вложенные ссылки в HTML: правила и особенности

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

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

Возьмем для наглядности пример расположения ссылок параллельно с управлением через JavaScript:

<div onclick="location.href='http://example1.com';" style="cursor: pointer;">
  Кликните для перехода на Example1
  <span onclick="event.stopPropagation(); location.href='http://example2.com';">кликните для перехода на Example2</span>
</div>

С помощью обработчика onclick в теге <span>, мы прерываем всплытие события, что содействует управлению активацией ссылок.

JavaScript и CSS: ключевые манипуляции с кликами

Если стоит вызов пересматривать вложенные ссылки, тогда на помощь придут JavaScript и CSS. Благодаря этим инструментам можно создавать кликабельные участки, используя блочные элементы и абсолютное позиционирование, что в свою очередь облегчит поддержание HTML-структуры чистой и удобной.

Примеры подходов:

1. Блочные элементы и CSS: Создавайте отдельные кликабельные зоны с помощью блочных элементов, обеспечивая тем самым их визуальное перекрытие не принимая в учет преобразование структуры HTML.

   HTML

   Скопировать код

   <div class="link-container">
     <a href="http://example1.com" class="main-link">Главная кликабельная зона</a>
     <div class="overlay">
       <a href="http://example2.com" class="nested-link">Дополнительная кликабельная зона</a>
     </div>
   </div>

   Запустить код

2. Свойство pointer-events: Свойство pointer-events: all поддерживает кликабельность ссылок даже при наложении элементов друг на друга.

3. Обработка событий: Управляйте кликами с помощью функций JavaScript, предотвращая стандартное поведение и остановку всплытия, чтобы гарантированно выполнить желаемое действие.

Как создать элементы, удобные для пользователя и доступные

При разработке интерфейса не забывайте уделять внимание пользовательскому опыту и доступности:

Семантика HTML

Правильная HTML-структура способствует лучшему восприятию и улучшает доступность. Для создания кликабельных элементов используйте теги <div> и <span>.

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

Продумывание пользовательского опыта

Тщательно прорабатывайте дизайн сайта, обрабатывайте JavaScript-взаимодействия и документируйте код для удобства и прозрачности его поддержки.

Альтернативы вложенным ссылкам

Если вложение ссылки кажется единственной возможностью, используйте <object> для организации независимых ссылок, следуя HTML-стандартам.

Доступность

Взаимодействие с интерактивными элементами должно быть возможным не только с помощью мыши, но и с клавиатуры. Также непременно добавьте атрибуты aria для упрощения работы со скринридерами.

Инновации для преодоления трудностей

Творческие подходы могут помочь удовлетворить соответствие веб-стандартам:

Многоуровневые ссылки с абсолютным позиционированием

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

<div class="link-wrapper" style="position: relative;">
  <a href="http://example1.com">Ссылка 1</a>
  <a href="http://example2.com" style="position: absolute; top: 10px; left: 10px;">Ссылка 2</a>
</div>

Преобразование div-элементов в интерактивные

С помощью обработчика onclick тег <div> может обрести свойства кликабельной зоны:

<div onclick="window.location.href='http://example1.com';">Нажмите здесь для перехода по ссылке 1</div>

Управление событиями с помощью jQuery

Более упорядоченное и систематизированное управление событиями можно достигнуть с помощью jQuery.

$(".outer-link").on("click", function() {
  // Действие для внешней ссылки
});

$(".inner-link").on("click", function(event) {
  event.stopPropagation();
  // Действие для внутренней ссылки
});

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

Возьмем для примера: два 🚂 поезда на одной и той же линии:

🚂==🛤️==>🚋  // Поезд А — внешняя ссылка
     |
     | (Вложенность)
     V
🚂==🛤️==>🚋  // Поезд В — внутренняя ссылка

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

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

1. HTML Standard — Изучите официальные рекомендации и руководство по тегу <a>.
2. <a>: Элемент-якорь – HTML: Язык разметки гипертекста | MDN — Руководство MDN Web Docs по использованию якорных элементов.
3. Nested Links | CSS-Tricks — Советы и методы для стилизации вложенных ссылок с использованием CSS.
4. Сервис проверки разметки W3C — Инструмент для проверки вашего HTML кода на соответствие веб-стандартам.
5. HTML Ссылки гипертекста — Подробные объяснения и инструкции по созданию гипертекстовых ссылок в HTML.
6. Can I use... Таблицы поддержки для HTML5, CSS3 и т.д. — Таблицы совместимости функций HTML5 и CSS3 с различными браузерами.
7. Рекомендации по визуализации ссылок — Советы на тему улучшения визуализации ссылок и пользовательского опыта.