1️⃣
Разметка
  • 1. 1. Введение
  • 1. 2. Введение в HTML
  • 1. 3. Подходы к разметке
  • 1. 4. Работа со спецификацией
  • 1. 5. Проверка валидности
  • 1. 6. Часто используемые теги и типовые ошибки
  • 1. 7. Методика семантической разметки
    • 1. 7. 1. Определяем DOCTYPE
    • 1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта
    • 1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
    • 1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
    • 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
    • 1. 7. 6. Шаг 5. Размечаем фразовые элементы
  • 1. 8. Использование тега br
  • 1. 9. DOCTYPE
  • 1. 10. Как работает атрибут target
  • 1. 11. Правильное использование ссылок и кнопок
  • 1. 12. Как делать пустые ссылки?
  • 1. 13. Как правильно скрывать элементы?
  • 1. 14. Когда применять список терминов (dl)?
  • 1. 15. Как использовать ссылки mailto: и tel:
  • 1. 16. Именование сущностей
  • 1. 17. Разметка по БЭМ
    • 1. 17. 1. Введение
    • 1. 17. 2. Предыстория
    • 1. 17. 3. Частые проблемы из-за неправильной CSS-архитектуры проекта
    • 1. 17. 4. Основные понятия
    • 1. 17. 5. Свод правил БЭМ-а
    • 1. 17. 6. БЭМ для CMS
    • 1. 17. 7. Названия классов по БЭМ
    • 1. 17. 8. БЭМ — это про компоненты
    • 1. 17. 9. Темизация
    • 1. 17. 10. Плюсы и минусы БЭМ
    • 1. 17. 11. Алгоритм выделения блоков
    • 1. 17. 12. Типовые интерфейсные решения
    • 1. 17. 13. Блоки и элементы
    • 1. 17. 14. Миксы блоков и элементов
    • 1. 17. 15. Модификаторы блоков и элементов
    • 1. 17. 16. Типовые ошибки
  • Дополнительные материалы
Powered by GitBook
On this page
  • Глава 1.15. Как работает атрибут target
  • Применение на практике
  • Безопасность

1. 10. Как работает атрибут target

Глава 1.15. Как работает атрибут target

Чтобы управлять способами открытия ссылки, существует атрибут target. Разберёмся с его возможностями. У атрибута есть несколько ключевых значений:

  • _self — откроет ссылку в том окне браузера (или фрейма), в котором находится ссылка;

  • _blank — откроет ссылку в новой вкладке браузера;

  • _parent — откроет ссылку в родительском окне браузера (или фрейма), относительно того, в котором находится ссылка; если такого нет, то сработает как _self;

  • _top — откроет ссылку в самом верхнем уровне, то есть почти всегда это будет окно браузера, в котором находится ссылка; если ссылка уже находится на странице, то будет работать как _self.

Помимо ключевых значений ему можно задать произвольное значение. Тогда ссылка откроется в фрейме с соответствующим атрибутом name. Если такого фрейма не найдётся, то ссылка откроется в новой вкладке (как при использовании значения _blank).

Применение на практике

Сегодня из всех способов применяется только target="_blank" для того, чтобы открыть ссылку в новой вкладке. Все прочие варианты на практике уже не используются.

Безопасность

Однако, у этого метода есть слабое место: страница, открывающаяся в новой вкладке, имеет частичный доступ к странице, с которой совершён переход. Имея такой доступ, злоумышленник может получить личные данные пользователя.

Чтобы этого избежать, нужно воспользоваться атрибутом rel, записав в него два значения:

  • nofollow — делает ссылку закрытой для индексирования поисковыми системами;

  • noopener — создаёт новый контекст для открываемой страницы, то есть разрывает связь между страницами, открывшаяся страница больше не имеет доступа к исходной.

Выглядит это так:

<a href="https://htmlacademy.ru" target="_blank" rel="nofollow noopener">.html academy</a>

Кроме того есть способы создать новый контекст с помощью JavaScript, но в этой главе они не рассматриваются.

Previous1. 9. DOCTYPENext1. 11. Правильное использование ссылок и кнопок

Last updated 1 year ago