Как открыть ссылку в новой вкладке — объяснение HTML атрибута target

Будут времена, когда вы захотите, чтобы ваш пользователь щелкнул ссылку на веб-сайт и открыл ее в новой вкладке браузера. Но как это сделать в HTML?

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

Как открыть новую вкладку браузера с помощью target="_blank"

Атрибут target="_blank" используется внутри открывающего тега привязки следующим образом:

<a href="ваша-ссылка-на-другую-страницу" target="_blank">Название ссылки</a>

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

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

<p>Если вам нужны самые крутые цвета для вашего проекта, переходите по ссылке <a href="https://frontendcolors.ru" target="_blank">FrontendColors.ru</a></p>

Когда вы нажмете на ссылку FrontendColors, она откроет для вас новую вкладку браузера.

Если бы я опустил этот target="_blank" атрибут, то поведение по умолчанию состояло бы в том, чтобы покинуть текущую веб-страницу и перейти непосредственно к ссылке, не открывая новую вкладку браузера.

Что такое noopener ключевое слово?

Ключевое noopenerслово в rel атрибуте используется в первую очередь из соображений безопасности, чтобы злоумышленники не могли вмешиваться в исходную веб-страницу через Window.opener свойство. Если злоумышленник получит доступ к вашему оконному объекту, он может перенаправить вашу страницу на вредоносный URL-адрес.

Вы можете использовать noopener ключевое слово, чтобы предотвратить возникновение этой проблемы безопасности. Вот как используется это noopener ключевое слово:

                    

<p>Если вам нужны самые крутые цвета для вашего проекта, переходите по ссылке <a rel="noopener" href="https://frontendcolors.ru" target="_blank">FrontendColors.ru</a></p>

Обновления noopener ключевого слова

В 2021 году было сделано обновление, в котором современные браузеры теперь устанавливают rel=noopenerлюбую ссылку с использованием target=_blank атрибута. Даже с этим обновлением многие разработчики по-прежнему будут использовать атрибут rel=noopener для ссылок target=_blank

Следует ли вам использовать target="_blank" атрибут все время?

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

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

Заключение

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

Атрибут target="_blank" используется внутри открывающего тега привязки следующим образом.

                    

<a href="https://frontendcolors.ru" target="_blank">FrontendColors.ru</a>

Ключевое noopener слово в rel атрибут добавлено, чтобы злоумышленники не могли вмешиваться в исходную веб-страницу через Window.opener свойство.

                    

<a href="https://frontendcolors.ru" rel="noopener" target="_blank">FrontendColors.ru</a>

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