"Различия _self, _top и _parent в атрибутах цели тега <a>"

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

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

• _self: Ссылка загружается в текущем контексте, то есть в той же вкладке или окне.
• _top: Ссылка открывается в верхнем фрейме ("корневом"), игнорируя все вложенные.
• _parent: Страница загружается в родительском фрейме, если он есть, в противном случае поведение схоже с _self.

Пример кода:

<a href="url" target="_self">Ссылка в текущем контексте</a>
<a href="url" target="_top">Ссылка в корневом контексте</a>
<a href="url" target="_parent">Ссылка в родительском контексте</a>

Основная цель использования этих атрибутов – предоставление ожидаемой навигации и поддержка удобного пользовательского опыта.

Знайте свои цели: _self, _top и _parent

Понимание различий между атрибутами _self, _top и _parent способствует оптимальной организации навигации и влияет на взаимодействие пользователя с вашим сайтом. Разберём эти атрибуты подробнее:

_self: Оставайтесь на месте

Используя _self, вы позволяете пользователю остаться в исходном контексте. Это отлично подходит для сохранения текущего состояния страницы.

• Этот атрибут позволяет переопределить действие тега <base>.
• Пользователю предлагается предсказуемый результат без резкого переключения контекста.

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

_parent: Возвращаемся на уровень выше

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

• Перенаправляет непосредственно в родительский фрейм.
• В отсутствие родительского фрейма ведёт себя как _self.

_top: Направляемся наверх!

_top даёт возможность освободиться от всех вложенных фреймов и занять весь экран браузера.

• Идеально подходит для создания полноэкранных интерфейсов, например, панелей управления или приложений на весь экран.
• Удаляет все фреймы из пути, даже самые верхние, "проламывая" путь наверх.

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

Рассмотрим атрибуты target (_self, _top и _parent) в другом ключе:

Эскиз здания:
🏢 – Общий комплекс
🚪 – Текущее помещение
🪜 – Лестница к родительскому уровню

Действия:

🔗 target="_self": Открыть 🚪 (представьте, что это "дверь" в вашем фрейме).
🔗 target="_top": Взобраться на самую вершину к 🏢 (мы все стремимся подняться как можно выше).
🔗 target="_parent": Подняться по 🪜 (или остаться на месте, если вы находитесь на верхнем этаже).

Кратко:

_self   = 🚪 – Окунитесь в атмосферу своего текущего пространства.
_top    = 🏢 – Распахните двери в мир возможностей!
_parent = 🪜 – Если есть возможность подняться, воспользуйтесь ей!

Особенности использования атрибута target

Навигация в современных фреймворках

С вводом HTML5, традиционные фреймы ушли на второй план, отдав предпочтение "просмотровым контекстам" – с каждым iframe или вкладкой работают как с отдельным пространством.

_blank и вопросы безопасности

При использовании _blank для открытия ссылки в новой вкладке рекомендуется добавить rel="noopener" для предотвращения угроз безопасности.

Работа с frameset

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

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

1. <a>: Тег гиперссылки – HTML: Язык гипертекстовой разметки | MDN — Подробности об элементе <a>.
2. HTML a target Attribute – W3Schools — Подробное руководство по использованию атрибута target.
3. Когда использовать target="_blank" | CSS-Tricks — Советы по использованию _blank и управлению вкладками.
4. HTML Iframes – W3Schools — Обзор iframes, ближайших "родственников" _parent и _top.
5. HTML Standard – WHATWG — Официальные рекомендации по использованию допустимых имен просмотровых контекстов.
6. HTML | target Attribute – GeeksforGeeks — Продвинутые материалы для понимания и использования атрибута target.