A тег: Атрибут target | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

— HTML — Дока

Кратко

Скопировано

Тег <a> превращает любой объект в ссылку.

Пример

Скопировано

<a href="https://www.yandex.ru/">Яндекс</a>
          <a href="https://www.yandex.ru/">Яндекс</a>

Открыть демо в новой вкладке

Как понять

Скопировано

Разместите текст, картинку или другой элемент внутри тега <a>, чтобы сделать его ссылкой. Ссылка может вести на любую страницу, файл, электронную почту или телефон. Для этого пропишите обязательный атрибут href="URL", где URL — любой адрес.

Бывает, что ссылка ведёт не на другую страницу, а на раздел внутри текущей страницы. Тогда такая ссылка называется якорной или просто «якорем». Чтобы её создать, вместо URL укажите идентификатор #id элемента, к которому должна вести ссылка. Например, <a href="#chapter1">Глава 1</a>. Идентификатор можно задать для любого тега, то есть «бросить якорь» в любую часть страницы.

Как пишется

Скопировано

<a href="URL">...</a>
          <a href="URL">...</a>

Атрибуты

Скопировано

download — если кликнуть по такой ссылке, браузер предложит пользователю скачать то, что по ней находится. Это может быть файл или другая страница — главное, чтобы они находились на том же домене, что и ссылка. Если добавить атрибуту значение, можно задать название скачиваемому файлу. Например, <a href="/?z=484c08ca" download="фотки.zip"> предложит скачать файл с названием фотки. zip. Пользователь сможет изменить название при скачивании.

href — обязательный атрибут, содержащий адрес, по которому перейдёт пользователь, нажав на ссылку. Это может быть либо URL-адрес, либо якорная ссылка #id. Якорная ссылка ведёт на элемент с таким же #id на этой странице. URL может вести не только на привычные страницы в интернете, но также на почту или телефон, например href="mailto:name@domain.com" или href="tel:+70001234567". Для этого добавьте в значение атрибута один из протоколов, например, file:, mailto: или tel:.

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

ping — этот коварный атрибут следит, что пользователь перешёл по тому URL-адресу, который в нём указан.

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

target — определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера. Без этого атрибута содержимое ссылки откроется в той же вкладке. Вот все варианты, где можно открыть URL-ссылку:

_self: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут.
_blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
_parent: на родительской странице от текущей, то есть уровнем вложенности выше. Например, если на страницу вставлен фрейм, а внутри него такая ссылка, то она откроется не внутри фрейма, а на той странице, куда вставлен этот фрейм. Если родительской страницы нет, то ссылка откроется вместо текущей страницы.
_top: в самой высокой «корневой» странице. Например, если есть страница, куда вставлен фрейм, в который вставлен фрейм, в котором ссылка c target="_top", то ссылка откроется в самой-самой верхней странице, насколько глубоко она бы ни находилась.

Используйте этот атрибут, только если указан href.

💡 Вместе с атрибутом target обязательно используйте rel="noopener noreferrer", чтобы в момент открытия внешние сайты не узнали лишнего про текущую страницу.

type — определяет, к какому типу относится документ по ссылке. Речь идёт о типах по стандарту MIME. Это чисто техническая информация, но её можно указать, чтобы применить общий стиль к ссылкам одного типа.

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

Подсказки

Скопировано

💡 Чтобы отправить пользователя в самый верх страницы, используйте href="#top" или href="#".

💡 Обязательно указывайте атрибут href для ссылок, без него они неотличимы от <span> и перестают иметь смысл. Спецификация HTML допускает «логические» ссылки без href для текущих или будущих ссылок, но практической пользы в этом мало.

💡 Якорная ссылка может также вести и на нужный раздел внешней страницы. Для этого используйте URL-ссылку, а в конце, после знака #, добавьте ID якоря. Например: https://yoursite.com/how-to-make-cookies#alternative-recipe

Ещё примеры

Скопировано

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

<a href="https://doka. guide/" target="_blank">  <img src="dogs.png" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо"></a>
          <a href="https://doka.guide/" target="_blank">
  <img src="dogs.png" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо">
</a>

Открыть демо в новой вкладке

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

<a href="mailto:[email protected]">Отправить сообщение в никуда</a>
          <a href="mailto:[email protected]">Отправить сообщение в никуда</a>

Открыть демо в новой вкладке

На практике

Скопировано

Вадим Макеев советует

Скопировано

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

Чтобы создать такую ссылку, нужно две вещи:

Добавить уникальный id="element" целевому элементу.
Сослаться на него с помощью ссылки вида #element.

<a href="#section-1">  Фотографии пёсиков</a>…<section>  <h4>Фотографии пёсиков</h4></section>
          <a href="#section-1">
  Фотографии пёсиков
</a>
…
<section>
  <h4>Фотографии пёсиков</h4>
</section>

Чтобы перемещение по якорю было плавным, можно добавить свойство scroll-behavior контейнеру, который будет прокручиваться. Чаще всего, это <body>:

body {  scroll-behavior: smooth;}
          body {
  scroll-behavior: smooth;
}

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

Например, генераторы статики умеют делать уникальный id из содержимого заголовка:

<h4>  Уникальный заголовок</h4>
          <h4>
  Уникальный заголовок
</h4>

Иногда перемещение по якорю прокручивает страницу впритык к целевому элементу, обрезая родительский контейнер. Это можно исправить, если поставить id на родительский контейнер, либо с помощью свойства scroll-margin — оно добавит нужный отступ.

h4 {  scroll-margin: 20px;}
          h4 {
  scroll-margin: 20px;
}

Алёна Батицкая советует

Скопировано

🛠 По умолчанию ссылка — строчный элемент. Поэтому, если нужно обернуть в неё целый блок, задайте для ссылки display: block.

🛠 Ссылку нельзя вкладывать в ссылки 🤷‍♀️

🛠 Поскольку ссылка строчная, лучше вкладывать её в блочный элемент, а не наоборот.

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

<!-- Плохо --><a href="#">  <h3>Заголовок, он же ссылка</h3></a><!-- Хорошо --><h3>  <a href="#">Заголовок, он же ссылка</a></h3>
          <!-- Плохо -->
<a href="#">
  <h3>Заголовок, он же ссылка</h3>
</a>
<!-- Хорошо -->
<h3>
  <a href="#">Заголовок, он же ссылка</a>
</h3>

На собеседовании

Скопировано

❓

Какая разница между кнопками и ссылками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Использование тегов в Teams — Служба поддержки Майкрософт

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

С помощью тегов можно классифицировать людей по атрибутам, таким как роль, проект, навык, обучение или расположение. Например, тег «Медсестра», «Менеджер» или «Конструктор» позволит вам обращаться к группам людей в Teams без необходимости вводить каждое отдельное имя.

После добавления тега просто @mention его в канале. Все, кому назначен этот тег, получат уведомление так же, как если бы они были @mentioned по отдельности.

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

Создание тегов и управление ими в Teams

Выберите Teams в левой части приложения и найдите свою команду в списке. Затем выберите Дополнительные параметры и выберите Управление тегами .

Здесь можно создавать теги и назначать их пользователям в команде.

@mention тега в канале

В беседе канала просто @mention тег в сообщении и выберите тег из списка.

Тег будет отображаться так же, как и любой @mention, и пользователи, связанные с тегом, получат уведомление.

Использование тегов в чате

Чтобы начать чат с участниками тега, выберите Новый чат , начните вводить имя тега, а затем выберите тег из списка. Все участники группы тегов будут добавлены в поле Кому: .

Управление параметрами для владельцев команд

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

Перейдите в раздел Дополнительные параметры выберите Управление командой , перейдите на вкладку Параметры , а затем перейдите в раздел Теги .

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

Примечание: Если вы не можете создавать теги или управлять ими, возможно, эта функция не включена в вашей организации или вы не являетесь владельцем команды. Если теги включены и вы не являетесь владельцем команды, вы по-прежнему можете просматривать теги, которые были применены к себе или другим участникам команды.

Примечание: Теги еще не доступны в организациях Сообщества государственных организаций США (GCC), GCC High или Министерства обороны США (DoD).

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

Выберите Teams в нижней части приложения и найдите свою команду в списке. Затем выберите Дополнительные параметры и выберите Управление тегами .

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

Выберите Teams в нижней части приложения и найдите свою команду в списке. Затем выберите Дополнительные параметры и выберите

Управление тегами .

Тег HTML 5

Тег HTML используется для создания гиперссылки на другую веб-страницу.

Вы можете использовать атрибут target , чтобы указать, следует ли открывать веб-страницу в новом окне браузера или нет.

Вы также можете использовать этот тег для ссылки на изображение.

Демо

Атрибуты

Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

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

Специфичные для элемента атрибуты

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

Атрибут Описание

href Указывает URL-адрес страницы, на которую ведет ссылка.

цель

Указывает контекст просмотра по умолчанию для загрузки URL-адреса. Используется только при наличии атрибута href .

Возможные значения:

_пусто
_self
_верх
_родительский
Любая строка, содержащая хотя бы один символ, которая не начинается с символа U+005F LOW LINE . Другими словами, не может начинаться с символа подчеркивания (имена, начинающиеся с подчеркивания, зарезервированы для специальных ключевых слов).

загрузить

Указывает, что ссылка должна использоваться для загрузки ресурса (например, файла). Автор может указать имя файла по умолчанию, указав значение. Этот атрибут является необязательным.

Значение:

[Имя файла по умолчанию.] (необязательно)

rel

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

Возможные значения:

Значение	Описание
альтернативный	Дает альтернативные представления текущего документа.
автор	Дает ссылку на автора текущего документа.
закладка	Предоставляет постоянную ссылку на ближайший раздел-предок.
внешний	Указывает, что документ, на который делается ссылка, не является частью того же сайта, что и текущий документ.
help	Предоставляет ссылку на контекстно-зависимую справку.
лицензия	Указывает, что основное содержание текущего документа защищено лицензией на авторское право, описанной в документе, на который делается ссылка.
next	Указывает, что текущий документ является частью серии и что следующий документ в серии является документом, на который делается ссылка.
nofollow	Указывает, что первоначальный автор или издатель текущего документа не поддерживает указанный документ. Этот атрибут часто используется для объявления платных ссылок для поисковых систем, таких как Google, которые требуют, чтобы веб-мастера объявляли все платные ссылки (например, рекламные) таким образом.
noopener	Создает контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра, если гиперссылка изначально создает любой из них (т. е. имеет соответствующее значение атрибута `target` ).
noreferrer	Требует, чтобы пользовательский агент не отправлял заголовок HTTP `Referer` (sic), если пользователь переходит по гиперссылке.
opener	Создает вспомогательный контекст просмотра, если в противном случае гиперссылка создала бы контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра (т. е. имеет `"_blank"` как `целевое значение атрибута` ).
пред	Указывает, что текущий документ является частью серии и что предыдущий документ в серии является документом, на который делается ссылка.
поиск	Дает ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
тег	Дает тег (идентифицируемый по заданному адресу), который применяется к текущему документу.

rev Отношение обратной ссылки целевого ресурса к этому документу (или подразделу/теме).

hreflang Код языка целевого URL. Используется только при наличии атрибута href .

type Указывает MIME-тип связанного ресурса. Используется только при наличии атрибута href .

реферальная политика Политика Referrer для выборок, инициированных элементом.