Атрибут target – Гиперссылка — что это такое, как сделать ссылку и вставить в HTML код (href, target blank и другие атрибуты тега a) | Создание сайтов и заработок в сети

Теги HTML - Атрибут target

Описание

Вы можете определить окно, в которое будет загружаться веб-страница, открытая по ссылке. Для этого используется атрибут target, в качестве его значения указывается имя окна или фрейма. Если target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис

<base target="имя окна">

Значения

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

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Если для тега <base> установлен target="_blank", можно сделать чтобы ссылка открывалась в текущем окне, если добавить к тегу <a> атрибут target="_self".

Значение по умолчанию

_self

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример 1. Открытие ссылки в новом окне
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег base, атрибут target</title>
  <base target="_blank">
 </head>
 <body>
  <p><a href="new.html">Ссылка откроется в новом окне</a></p>
  <p><a href="current.html" target="_self">Ссылка откроется в текущем окне</a></p>
 </body>
</html>
Пример 2
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег base, атрибут target</title>
  <base target="_blank">
 </head>
 <body>
  <p><a href="new.html">Ссылка откроется в новом окне</a></p>
  <p><a href="current.html" target="_self">Ссылка откроется в текущем окне</a></p>
 </body>
</html>

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
21211
AndroidFirefox MobileOpera MobileSafari Mobile
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Анкоры и ссылки: как они работают в HTML

Гиперссылки — одна из фундаментальных технологий, которые делают интернет информационной магистралью. Понимание того, как использовать анкоры, является основным аспектов, который нужно освоить в HTML.

Тэгом анкора является <a>. Для него требуются открывающийся и закрывающийся тэги. Все, что расположено между ними, это сам анкор.

Если мы хотим использовать только одно слово в качестве анкора, мы оборачиваем 
только одно <a>слово</a> в теги анкора.

Чтобы ссылка охватывала весь абзац, нужно обернуть его в теги <a>.

<!-- Мы также можем использовать в качестве элемента анкора изображение -->
<a><img src = "http://example.com/image-file.png" /></a>

Приведенные выше примеры мало полезны. Мы не включили в них дополнительных инструкций. Сейчас эти элементы ни к чему не привязаны. Для этого нужно использовать дополнительные атрибуты, которые мы рассмотрим в этой статье.

Для создания гиперссылок необходимы три атрибута: href, target и download.

Атрибут href используется для указания цели или адресата для анкора. Он применяется для определения URL-адреса, к которому должен привязываться анкор.

В этом примере <a href="http://example.com"> текста анкора</a> 
ссылка ведет на URL-адрес <em> www.example.com </em>.

С помощью атрибута href можно сделать намного больше, чем просто указать ссылку на другой сайт. Например:

  • Использовать для создания прямой ссылки на любой элемент веб-страницы, которому был присвоен идентификатор.
  • Для связи с ресурсом, используя протокол, отличный от http.
  • Для запуска скрипта.

Например:

<a href="#Specify_a_Hyperlink_Target_href">Этот первый элемент анкора</a>  
ссылается на заголовок  этого раздела статьи. 
Используя <code>id</code>, мы можем назначить для раздела элемент заголовка.
Мы можем использовать протокол <code>mailto</ code>, 
чтобы создать ссылку, которая будет пытаться запустить на вашем компьютере
почтовую программу, используемую по умолчанию. Давайте попробуем! 
Нам бы хотелось, чтобы вы <a href="mailto:[email protected]">связались</a> с нами!
Если вы нажмете ссылку ниже, появится окно оповещения JavaScript.
 <a>Нажмите ссылку, чтобы увидеть, что произойдет </a>.

Элемент href прост в использовании. Но можно получить намного больше, познакомившись с атрибутом target.

Рассмотрим ссылку mailto, которую мы создали в предыдущем примере. Ее исходный код:

Нам бы хотелось, чтобы вы <a href="mailto:[email protected]">связались</a> с нами!

Ссылка полезна, но способ ее открытия не идеален. В зависимости от настроек браузера и ПК гиперссылка может перенаправить пользователей на сайты таких почтовых сервисов, как Gmail или Yahoo! Mail. Но из-за этого они посетители покинут наш ресурс.

Чтобы решить эту проблему, используйте атрибут target со значением _blank.

Мы будем рады, если вы <a href="mailto:[email protected]"
 target="_blank" rel="noopener">свяжетесь</a> с нами!

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

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

Атрибут href также применяется при создании анкора, который инициирует загрузку. Он указывает на место размещения загружаемого файла.

Пример реализации:

Чтобы создать ссылку, которая указывает браузеру 
<a href="http://example.com/file.ext" download="Example_File">скачать файл</a>,
 используйте атрибут <code>href</ code>, чтобы идентифицировать файл
 для скачивания
и атрибут <code>download</code>, чтобы указать имя скачиваемого файла.

Атрибут href в приведенном выше примере указывает на реальный файл. Когда загрузка будет завершена, его имя будет Example_File.ext, где .ext — это формат файла. Нет необходимости включать расширение файла в значение, присваиваемое атрибуту download. Оно будет идентифицировано и добавлено к имени загруженного файла.

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

Создание внутренних ссылок важно по нескольким причинам:

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

При создании внутренних ссылок убедитесь, что вы не переусердствовали. Ссылочный вес любой веб-страницы передается через ссылки, размещенные на ней. Чем больше ссылок вы размещаете на странице, тем больше ссылочного веса уходит через эти ссылки. Рекомендуется размещать не более 100 ссылок на одной странице.

Внешние ссылки важны по нескольким причинам:

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

При использовании внешних ссылок не ссылайтесь на прямых конкурентов. И не забывайте применять атрибут target=»_ blank». Открывая внешние ссылки в новой вкладке браузера, пользователи продолжают оставаться на вашем сайте.

Конечно, вы видели и ссылки, которые выглядят примерно так:

Чтобы узнать больше <a href="http://example.com">нажмите здесь</a>!

Но лучше не использовать такие анкоры. Для этого существует несколько причин:

  • Пользователям потребуется несколько секунд, чтобы исследовать текст вокруг ссылки и получить представление о том, куда она ведет.
  • Поисковые роботы связывают текст анкора с URL-адресом ссылки. Правильно подобранный анкор помогает поисковым системам определять релевантность веб-страницы ключевикам.

Текст анкора должен быть кратким и идентифицировать ключевые слова, относящиеся к веб-странице. Два примера правильно выбранного текста ссылки:

Если хотите, чтобы ваш сайт получал больше трафика из 
<a href="http://www.google.com/" target="_blank" rel="noopener">
 поисковых систем</a>,
 ознакомьтесь с нашим <a href="/seo/">руководством по SEO</a>,
 в котором вы найдете советы по улучшению ранжирования сайта.

Первая ссылка сообщает поисковым роботам и пользователям, что сайт http://www.google.com имеет отношение к ключевому слову «поисковые системы». Вторая ссылка сообщает, что страница, расположенная по относительному URL-адресу /seo/, связана с ключевым словом «руководство по SEO».

Абсолютные URL-адреса — это те, которые содержат полное (абсолютное) описание адреса ссылки. Они включают в себя протокол (http), полное имя домена и путь к файлу.

Относительные URL-адреса, ссылаясь на веб-страницу, описывают ее положение относительно текущей веб-страницы. При создании внутренних ссылок, указывающих на другие страницы одного и того же сайта, можно использовать относительные URL-адреса, а не абсолютные.

Например, если мы находимся по адресу: http://example.com/products/red-product/, и хотим сослаться на страницу синего товара, можно использовать любой из следующих анкоров:

<a href="/products/blue-product/">Перейти к странице синего товара!</a>
<a href="../blue-product/">Перейти к странице синего товара!</a>

Первый синтаксис говорит следующее: «Перейдите на самый нижний уровень дерева, найдите в нем каталог product, а в нем откройте папку blue-product. Второй синтаксис говорит следующее: «Перейдите в родительский каталог для red-product и в нем вы найдете папку blue-product». Оба анкора указывают на URL-адрес: http://example.com/products/blue-product/.

Предположим, что нужно разместить ссылку на страницу «About Us», которая является прямым потомком главной. Вот как можно это сделать:

<a href="/about-us/">Узнайте больше о нас.</a>

В этом примере говорится следующее: «Вернитесь к самому нижнему уровню дерева каталогов, а затем найдите папку about-us».

Предположим, что мы снова находимся по адресу http://example.com/products/red-product/, и хотим разместить ссылку на страницу подкатегории. Она располагается в каталоге /red-products /category.

<a href="large.php">Смотреть все красные товары, доступные в большом размере!</a>

Приведенный выше URL-адрес заставляет браузер искать в текущей папке файл large.php и преобразовать его в URL-адрес — http://example.com/products/red-product/large.php.

Главное об относительных URL:

  • Если URL-адрес начинается с «/», то мы заставляем браузер искать указанный файл или папку на самом нижнем уровне дерева каталогов.
  • Если URL-адрес начинается с «../», то мы указываем браузеру на необходимость вернуться на один уровень вверх в дереве каталогов.
  • Если URL-адрес начинается с имени файла или папки, то мы указываем браузеру искать ресурсы в текущем файле.

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

Этот необязательный атрибут сообщает браузеру язык документа, на который ведет ссылка. Например, если нужно сообщить браузеру, что целевой источник написан на испанском, мы будем использовать в качестве значения hreflang соответствующий код языка в формате ISO 639-1.

Чтобы сообщить браузеру, что <a href="http://example.com" hreflang="es">ссылка</a>
 ведет на ресурс на другом языке, можно использовать атрибут 
<code> hreflang </ code>.

Атрибут rel используется для описания отношений между анкором и целевым источником. Например:

Эта статья была написана <a href="https://plus.google.com/+AuthorName"
rel="author">Отличным автором</a>.

Существует несколько значений, которые принимает атрибут rel:

  • rel=»nofollow»: используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
  • rel=»alternate»: если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
  • rel=»bookmark»: это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
  • rel=»help»: идентифицирует связанный ресурс как файл справки для страницы с этим значением.
  • rel=»license»: используйте этот атрибут для ссылки на лицензию авторских прав.
  • rel=»next»: используйте это значение для ссылки на следующий документ из серии.
  • rel=»prev»: используйте это значение для ссылки на предыдущий документ из серии.
  • rel=»noreferrer»: если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.

Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type=»text/html», чтобы сообщить браузеру, что ссылка указывает на HTML-документ.

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

Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.

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

Название элемента Атрибуты Примечания
link href
rel
media
title
type
Элемент <link> используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS.
anchor hreflang
download
target
title
href
name
Элемент <a> используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице.
base target
href
Элемент <base> используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если <base> имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе.

Данная публикация представляет собой перевод статьи «Anchors & Links: How They Work In HTML» , подготовленной дружной командой проекта Интернет-технологии.ру

target - атрибут HTML тега base

Атрибут тега base, target, определяет окно, в которое будет загружаться веб-страница, открытая по ссылке.

В качестве значения атрибута target указывается имя окна или фрейма. Если target не задан, страница будет открыта в текущем окне.

Настольные Мобильные
Internet Explorer Chrome Opera Safari Firefox
2 1 2 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Правила написания атрибута target для тега base

<base target="имя окна">

Здесь имя окна - имя окна или фрейма. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие:

  • _blank - загружает страницу в новое окно, или вкладку браузера в зависимости от его настроек.
  • _self - загружает страницу в текущее окно.
  • _parent - загружает страницу во фрейм-родитель. При отсутствии фреймов работает как _self.
  • _top - отменяет все фреймы и загружает страницу в полном окне браузера. При отсутствии фреймов работает как _self.

Значение по-умолчанию _self.

Если для тега <base> установлен атрибут target="_blank", то можно сделать чтобы ссылка открывалась в текущем окне, если добавить к тегу <a> атрибут target="_self".

Пример с тегом base и атрибутом target



<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Тег base с атрибутом target</title>
  <base href="http://site.ru/base/" target="_blank"> 
</head>  
<body> 
  <p><a href="download.php" target="_self">скачать</a></p>
</body>
</html>

Результат примера вы можете увидеть на рисунке ниже:

Атрибут target



Определение и использование

Для элементов area, атрибут target указывает, где открыть связанный документ.

Для элементов base, атрибут target указывает целевой объект по умолчанию для всех гиперссылок и форм на странице.

Для элементов form, атрибут target указывает имя или ключевое слово, указывающее, где должен отображаться ответ, полученный после отправки формы.


Применение

Атрибут target можно использовать для следующих элементов:


Примеры

Пример A

Атрибут target указывает, где открыть связанный документ:

<a href="https://www.schoolsw3.com" target="_blank">Посетите SchoolsW3</a>

Попробуйте сами »

Пример Area

Изображение-карта с кликабельными областями и целевым атрибутом:


usemap="#planetmap">

<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Солнце"
target="_blank">
 <area shape="circle" coords="90,58,3" href="mercur.html" alt="Меркурий">
 <area shape="circle" coords="124,58,8" href="venus.html" alt="Венера">
</map>

Попробуйте сами »

Пример Base

Указать цель по умолчанию для всех гиперссылок и форм на странице:

<head>
<base target="_blank">
</head>

Попробуйте сами »

Пример Form

Отображение полученного ответа в новом окне или вкладке:

<form action="/action_page.php"method="get" target="_blank">
 Имя: <input type="text" name="fname"><br>
 Фамилия: <input type="text" name="lname"><br>
 <input type="submit" value="Отправить">
</form>

Попробуйте сами »

Поддержка браузеров

Атрибут target имеет следующую поддержку браузера для каждого элемента:

Элемент
a Да Да Да Да Да
area Да Да Да Да Да
base Да Да Да Да Да
form Да Да Да Да Да

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *