How To Use The <a> To Make Links & Open Them Where You Want!
The only currently relevant value of target is _blank . The other values of target were used to specify specific frames. However, frames have been deprecated in HTML5.
Default target
If no target is specified, the link will open in the current context, unless the user or browser specifies otherwise.
a target=”_blank” Open in New Browser Tab (or Window)
The target attribute specifies where the linked document will open when the link is clicked. The default is the current window. If target=»_blank» , the linked document will open in a new tab or (on older browsers) a new window.
Why Open in a New Browser?
The most common reason to use `target=”_blank” is so that offsite links open in a separate tab. This allows a user to click on a reference and come back to it later without leaving the current page. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited.
Open All External Links in a New Tab with JavaScript
You don’t need to manually add target=»_blank» to every link on your site. If you link out a lot (which you should do), it is easy to add some JavaScript code to your site and turn all external links into _blank links automatically.
(You can see a slightly modified form of this code in action on every page of this website.) This trick requires jQuery, but there is a good chance you are using it already. It is used in the most popular frameworks and content management systems, including WordPress, Drupal, and Twitter Bootstrap. If you need to do it without jQuery, that can be done as well. Here is a “plain JavaScript” version:
Besides making it easier, this cleans up your markup considerably.
Reasons not to use `target=”_blank”
Some people argue that users do not prefer to open links in a new browsing context. They think that doing so is similar to popup ads and other annoying behavior. With the rise of tabbed browsing, this argument has largely gone away. Most users prefer to open links in a new tab, because it allows them to come queue referenced links for later reading without losing their current browsing context.
HTML элементы. Тег <a>
Тег <a> определяет гиперссылку, которая используется для перехода с одной страницы на другую.
Наиболее важным атрибутом элемента <a> является атрибут href, который указывает на назначение ссылки.
По умолчанию ссылки будут выглядеть следующим образом во всех браузерах:
- Непосещенная ссылка подчёркнута и синим цветом
- Посещённая ссылка подчёркнута и фиолетовым цветом
- Активная ссылка подчёркнута и красным цветом
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Советы и заметки
Совет: Следующие атрибуты: download, hreflang, media, rel, target и type не могут присутствовать, если отсутствует атрибут href.
Совет: Связанная страница обычно отображается в текущем окне браузера, если вы не укажете другую цель.
Совет: Используйте CSS для стилизации ссылок: CSS Учебник. Ссылки и CSS Учебник. Кнопки
Различия между HTML 4.01 и HTML5
В HTML 4.01 тег <a> может быть гиперссылкой или якорем. В HTML5 тег <a> является всегда гиперссылкой, но если он не имеет атрибута href, он является только заполнителем для гиперссылки.
HTML5 имеет некоторые новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | char_encoding | Не поддерживается в HTML5. Определяет набор символов связанного документа |
| coords | coordinates | Не поддерживается в HTML5. Определяет координаты ссылки |
| download | filename | Указывает, что цель будет загружена, когда пользователь нажимает гиперссылку |
| href | URL | Определяет URL страницы, на которую идет ссылка |
| hreflang | language_code | Определяет язык связанного документа |
| media | media_query | Указывает, для какого носителя/устройства оптимизирован связанный документ |
| name | section_name | Не поддерживается в HTML5. Используйте глобальный id атрибут вместо этого. Определяет имя якоря |
| ping | list_of_URLs | Определяет разделенный пробелами список URL-адресов, по которым при переходе по ссылке браузер будет отправлять запросы на отправку сообщений с помощью основного текста (в фоновом режиме). Обычно используется для отслеживания. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Указывает, какой реферер отправить |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Определяет связь между текущим документом и связанным документом |
| rev | text | Не поддерживается в HTML5. Определяет связь между связанным документом и текущим документом |
| shape | default rect circle poly |
Не поддерживается в HTML5. Определяет форму ссылки |
| target | _blank _parent _self _top framename |
Указывает, где открыть связанный документ |
| type | media_type | Определяет тип мультимедиа связанного документа |
Глобальные атрибуты
Атрибуты события
Попробуйте сами — Примеры
Создать кликабельное изображение
Как использовать изображение в качестве ссылки.
Открыть ссылку в новом окне браузера
Как открыть ссылку в новом окне браузера, чтобы посетителю не пришлось покидать ваш веб-сайт.
Создать ссылку на электронную почту
Как сделать ссылку на почтовое сообщение (будет работать, только если у вас установлена программа — почтовый клиент).
Создать телефонную ссылку
Как сделать ссылку на номер телефона.
Ссылка на другой раздел на той же странице
Как создать ссылку на элемент с указанным идентификатором на странице (атрибут name не поддерживается в HTML5).
Ссылка на JavaScript
Как добавить JavaScript внутри атрибута href.
Связанные страницы
HTML DOM справочник: Объект Anchor
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <a> со следующими значениями по умолчанию:
a:link, a:visited <
color : (внутреннее значение) ;
text-decoration : underline ;
cursor : auto ;
>
a:link:active, a:visited:active <
color : (внутреннее значение) ;
>
Target=»_blank» — очевидная польза и неочевидный вред
Атрибут target тега <a> известен каждому оптимизатору, т. к. существует с первых версий HTML. Он предназначен для указания, как открывать ссылку: в текущей вкладке/фрейме или в новой. То есть, он позволяет изменить стандартное поведение ссылок — открытие в той же вкладке.
Казалось бы, раз все знают, какой смысл писать об этом? Но на практике мы столкнулись с тем, что многие оптимизаторы:
- Не уделяют внимание данному атрибуту. Об этом говорит наша статистика по проектам, в которых не указан target=»_blank» для внешних ссылок.
- Не знают об одной важной особенности данного атрибута.
О том, что нужно знать про target=»_blank», мы расскажем в этой статье.
Польза target=»_blank»
Сохраняем пользователей
По умолчанию все ссылки сайта открываются в текущей вкладке браузера. Это касается и ссылок на другие сайты. Здесь появляется риск потери пользователей, которые навсегда уходят с вашего на внешний сайт. Например, уходят с карточки товара на сайт производителя и там «залипают».
Как это происходит?
Многие пользователи до сих пор не знают, что средней кнопкой мыши можно открывать ссылки в новых вкладках. Некоторые забывают об этом. Большинство просто нажимают по ссылке и переходят на внешний сайт, забывая, откуда они пришли.
Здесь как раз на помощь приходит атрибут target. Он позволяет принудительно открывать ссылки в новых вкладках браузера. Посмотрите, как это работает (нажимать левой кнопкой мыши):
-
(не забудьте вернуться)
Поэтому рекомендуем использовать данный атрибут для всех внешних ссылок на сайте:
<a href=»site.ru» target=»_blank»>Внешняя ссылка</a>
Удерживаем внимание
Также бывает полезно открывать некоторые внутренние ссылки в новой вкладке. Например, на карточке товара ссылку на информацию о доставке лучше открыть на новой странице, чтобы пользователь не потерял страницу с карточкой товара и продолжил заказ.
Вопрос-ответ по target=»_blank»
Чем отличается target=»blank» и target=»_blank»?
target=»_blank» — открывает все ссылки в разных вкладках, target=»blank» — все в одной новой вкладке.
Если у ссылок указан атрибут target=»_blank» (с подчёркиванием), то все они будут открываться в разных вкладках. Если на странице несколько ссылок с атрибутом target=»blank» (без подчёркивания), то все они будут открываться в одной отдельной вкладке. Первый вариант в большинстве случаев удобнее для пользователей, второй — применяется на ваше усмотрение.
Есть ли альтернативы?
Некоторые сайты используют JavaScript для открытия ссылок в новых вкладках. Например, такой вариант (вместо https://saitreport.ru подставить своё значение):
<a href=»https://saitreport.ru» onclick=»var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = this.href; return false;»>внешняя ссылка</a>
Данный скрипт можно оформить в виде отдельной функции, которая срабатывает на всех внешних ссылках.
Валидно ли использовать?
Атрибут target был исключён из XHTML. С тех пор атрибут считается невалидным. Но в HTML 5, атрибут был снова реабилитирован , поэтому его использование не противоречит современным стандартам.
Не страдает ли юзабилити?
Скорее нет, чем да.
По этому вопросу до сих пор ведутся жаркие споры. Против обычно выступают опытные пользователи, которые хотят на 100% контролировать поведение открываемых ссылок. Но они — в меньшинстве. Большинство вебмастеров склоняются к открытию внешних ссылок в новых вкладках из соображений удержания аудитории сайта и для удобства пользователей.
Как найти все внешние ссылки без target=»_blank» на сайте?
Для этой цели мы сделали в Сайтрепорте новый отчёт Внешние без target=»_blank» . Отчёт доступен как в интерфейсе, так и в виде CSV выгрузки.
Стоит отметить, что ссылки на поддомены Сайтрепорт считает внешними. Здесь вам стоит решить самим, ставить для них target=»_blank» или нет.
Помимо этого, вы сможете найти все внешние ссылки, циклические, ссылки-картинки и множество других срезов в отчётах Сайтрепорта.
Проверить сайт на ошибки
Target=»_blank» + rel=»noopener» = Безопасность
В использовании target=»_blank» есть одна особенность. Страницы, открытые через ссылки с этим атрибутом, выполняются в одном процессе браузера вместе с родительской страницей. Это плохо по двум причинам:
- Внешняя страница влияет на производительность родительской. То есть, если открытая внешняя страница потребляет много ресурсов, то подвиснет и ваша исходная страница.
- Внешняя страница получает частичный контроль над родительской страницей. Это может угрожать безопасности пользователей.
Подробнее с данной проблемой можно ознакомиться по ссылкам:
Чтобы избежать таких нежелательных последствий для всех внешних ссылок с атрибутом target=»_blank», необходимо использовать атрибут rel=»noopener». Данный атрибут разрывает связь родительской и дочерней страницы, и они начинают выполняться в разных процессах браузера.
Атрибут noopener можно использовать с атрибутом nofollow, если вы не хотите передавать вес стороннему сайту:
<a href=»site.ru» target=»_blank» rel=»nofollow noopener»>Внешняя ссылка</a>
Как найти все внешние ссылки с атрибутом target=»_blank», но без rel=»noopener» на сайте?
Об этом мы уже позаботились и сделали в Сайтрепорте отчёт Внешние ссылки с target=»_blank» без rel=»noopener» . Отчёт доступен как в интерфейсе, так и в виде CSV выгрузки.
Также в отчёте по ссылкам вы можете просмотреть содержимое атрибутов rel и target всех ссылок сайта — как внутренних, так и внешних.
Как исправить найденные ошибки?
Для популярных CMS есть плагины, позволяющие управлять поведением ссылок на сторонние сайты. Например, для WordPress это WP External Links . Если ваша CMS не имеет такой встроенной функции или плагина, то можно написать собственный скрипт или расставить атрибуты вручную, если на сайте немного страниц.
Для поиска, описанных в статье, и многих других ошибок, рекомендуем воспользоваться сервисом Сайтрепорт.
Проверить сайт на ошибки
Об Авторе
Сервис диагностики внутренней и внешней оптимизации сайта. Успешно работает с 2010 года.
2 комментария
Спасибо за интересный материал. Но вы забываете про самое главное — ориентир на пользователя. Вы игнорируете предпочтения пользователя. Открывая ссылки в новой вкладке, вы чуть ли не насильно говорите ему, «останься на нашем сайте, вдруг ещё пригодится, а эту ссылку открой в новой вкладке/окне». Если мне нужно запомнить ваш сайт/страницу, то я добавлю его в избранное и зайду в другое время (когда освободиться время, когда будет потребность, когда просто захочется для интереса зайти на данный сайт). Если я не нашёл ничего интересного для себя, то и нет повода оставаться на данном сайте. Функциональность «Добавить в избранное» сейчас работает во всех браузерах и заставить пользователя сейчас не потерять сайт скорее нужна только для новичка. А опытный пользователь скорее будет раздражён, если сайт без нужды откроет сайт в новой вкладке.
Константин, верно пишете. Здесь не всё однозначно. В конечном счёте решение принимает владелец сайта, ориентируясь на предпочтения аудитории и бизнес-задачи. Будем признательны, если кто-то из наших пользователей поделится информацией как повлияло внедрение target=»_blank» для внешних ссылок на глубину просмотра, время на сайте, заказы и т. п.
HTML Атрибут target
Атрибут target (от англ. «target» — «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный ресурс.
Для элементов <a> и <area> определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.
Для элемента <base> определяет имя фрейма, в котором будут открываться все ссылки.
Действие target в качестве атрибута элемента <base> распространяется на все ссылки документа, кроме ссылок в которых это действие переопределяется собственными атрибутами target .
Для элемента <form> определяет указывает место (фрейм или окно браузера) в которое должен быть загружен ответ сервера (результат отправки данных формы).
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён используются следующие:
_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Применяется к тегам
Отличия HTML 4.01 от HTML 5
В HTML 4.01 атрибут считался устаревшим и не рекомендован к использованию, в HTML 5 он полностью поддерживается.