Тег <a> в HTML: что это такое?

Синтаксис тега <a>

Cинтаксис тега <a> выглядит следующим образом:

<a href="URL">Текст ссылки</a>

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

Атрибуты тега <a>

1. download - говорит браузеру, что по клику на ссылку будет загружен файл.
2. href - используется для указания URL-адреса, на который будет вести ссылка.
3. hreflang - используется для указания языка и региона, к которым относится целевой ресурс.
4. ping - используется для указания списка URL-адресов, на которые браузер отправит пинг-запросы (HTTP-запросы) при клике на ссылку. Это может быть полезно для аналитики, позволяя отслеживать, какие ссылки были нажаты.
5. referrerpolicy - говорит браузеру, какую информацию о реферере (странице, с которой пришел пользователь) отправить при переходе по ссылке. Это может быть полезно для защиты конфиденциальности пользователей и повышения безопасности веб-приложений.
6. rel - предоставляет возможность указать различные отношения между текущим документом и целевым. Правильное использование значений этого атрибута может улучшить SEO, пользовательский опыт и защитить веб-приложения от потенциальных уязвимостей.
7. target - говорит браузеру, как открыть ссылку. Например, в текущей вкладке или новой.
8. type - подсказка о MIME-тип целевого ресурса - типе контента, на который ведет ссылка. Например, изображение или аудио.

Устаревшие атрибуты:

1. charset - указывает на кодировку символов на целевом ресурсе.
2. name - определяет якорную ссылку на странице.
3. rev - определяет обратную ссылку, с которой пришел пользователь.
4. shape - указывает на фигуру для ссылок ведущих на карту. Возможные значения circle, default, polygon и rect
5. coords - используется с атрибутом shape. В нем указываются координаты фигуры через запятую.

Так же поддерживает глобальные атрибуты.

Примеры использования тега <a>

Примеры использования атрибута download тега <a> в HTML

• filename: позволяет указать имя файла при загрузке.

  <a href="example.pdf" download="MyFile.pdf">Скачать MyFile в PDF формате</a>

• Пустое значение (поведение в разных браузерах может отличаться): если атрибут download указан без значения, то при скачивании файла браузер предложит имя файла из HTTP-заголовка Content-Disposition. Если такой заголовок отсутствует, то браузер предложит последний сегмент в ссылке. В примере ниже это будет example.pdf. Если же в атрибуте href указана не ссылка, то браузер попробует извлечь тип файла из HTTP-заголовка Content-Type, начала data: URL или Blob.type для blob: URL.

  <a href="/path/example.pdf" download>Скачать PDF</a>

Примеры использования атрибута href тега <a> в HTML

• Полный URL: ссылка на ресурс, включая протокол и имя домена.

  <a href="https://www.example.com">Перейти на Example</a>

• Относительный URL: ссылка на ресурс в пределах текущего сайта.

  <a href="/about">О нас</a>

• Якорная ссылка: ссылка на определенный элемент на странице.

  <a href="#section1">Перейти к разделу 1</a>

• Ссылка на файл: ссылка на файл для скачивания.

  <a href="/files/document.pdf">Скачать документ</a>

• Mailto: ссылка для отправки электронного письма.

  <a href="mailto:info@example.com">Написать нам</a>

• Tel: ссылка для совершения телефонного звонка (для мобильных устройств).

  <a href="tel:+1234567890">Позвонить</a>

• Файл с данными: ссылка на ресурс, который может быть использован для загрузки данных. После data: указывается MIME type - тип файла.

  <a href="data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==">Скачать файл</a>

• Протоколы: использование других протоколов, таких как FTP.

  <a href="ftp://ftp.example.com/file.txt">Скачать файл по FTP</a>

• JavaScript: ссылка, которая выполняет JavaScript-код.

  <a href="javascript:void(0);" onclick="alert('Hello!');">Кликни</a>

Примеры использования атрибута hreflang тега <a> в HTML

• Языковые коды: используются коды ISO 639-1, чтобы указать язык. Например: en — английский, fr — французский, de — немецкий.

  <a href="https://www.example.com/fr" hreflang="fr">Version Française</a>

• Языковые коды с региональными кодами: комбинировать языковые коды с региональными кодами ISO 3166-1. Например: en-US — английский (США), en-GB — английский (Великобритания), fr-CA — французский (Канада).

  <a href="https://www.example.com/fr-CA" hreflang="fr-CA">Version Française (Canada)</a>

• x-default: это значение указывает на страницу по умолчанию. Обычно это страница с редиректом на определённую для пользователя локаль.

  <a href="https://www.example.com" hreflang="x-default">Default Version</a>

Примеры использования атрибута ping тега <a> в HTML

• Список URL-адресов: позволяет указать один или несколько URL-адресов, разделенных запятыми.

  <a href="https://www.example.com" ping="https://tracker1.com, https://tracker2.com">Ссылка</a>

Примеры использования атрибута referrerpolicy тега <a> в HTML

• no-referrer: браузер не будет отправлять информацию о реферере.

  <a href="https://www.example.com" referrerpolicy="no-referrer">Ссылка</a>

• no-referrer-when-downgrade: браузер отправляет реферер, если переход осуществляется с HTTPS на HTTPS или с HTTP на HTTP, но не отправляет его при переходе с HTTPS на HTTP.

  <a href="https://www.example.com" referrerpolicy="no-referrer-when-downgrade">Ссылка</a>

• origin: браузер отправляет только источник (origin) реферера (протокол, хост и порт), но неполный путь.

  <a href="https://www.example.com/path" referrerpolicy="origin">Ссылка</a>

• origin-when-cross-origin: браузер отправляет полный реферер при переходах внутри одного источника, но при переходах на другой источник не полный путь, а только источник.

  <a href="https://www.example.com/path" referrerpolicy="origin-when-cross-origin">Ссылка</a>

• same-origin: браузер отправляет реферер только при переходах внутри одного источника. При переходах на другой источник реферер не отправляется.

  <a href="https://www.example.com" referrerpolicy="same-origin">Ссылка</a>

• strict-origin: браузер отправляет не полный путь, а только источник реферера и только при переходах с HTTPS на HTTPS. При переходах с понижением безопасности с HTTPS на HTTP реферер не отправляется.

  <a href="https://www.example.com" referrerpolicy="strict-origin">Ссылка</a>

• strict-origin-when-cross-origin (по умолчанию): при переходах внутри одного источника браузер отправляет полный путь, при переходах на другой источник - только источник, и не отправляет реферер, при понижении безопасности с HTTPS на HTTP.

  <a href="https://www.example.com" referrerpolicy="strict-origin-when-cross-origin">Ссылка</a>

• unsafe-url: браузер всегда отправляет полный реферер, независимо от того, является ли переход безопасным или нет. Это значение может представлять собой риск для конфиденциальности.

  <a href="https://www.example.com" referrerpolicy="unsafe-url">Ссылка</a>

Примеры использования атрибута rel тега <a> в HTML

Полный список значений доступен на MDN.

• nofollow: говорит поисковым ботам не переходить по этой ссылке и не учитывать ее для ранжирования.

  <a href="https://www.example.com" rel="nofollow">Ссылка</a>

• noopener: указывает, что новая страница не должна иметь доступ к объекту window.opener, что помогает предотвратить атаки через window.opener.

  <a href="https://www.example.com" target="_blank" rel="noopener">Ссылка</a>

• noreferrer: указывает, что браузер не должен отправлять заголовок реферера при переходе по ссылке и также предотвращает доступ к window.opener.

  <a href="https://www.example.com" target="_blank" rel="noreferrer">Ссылка</a>

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

  <a href="https://www.example.com" rel="external">Ссылка</a>

• prev: указывает на предыдущую страницу в последовательности страниц, например, в пагинации.

  <a href="https://www.example.com/prev" rel="prev">Предыдущая страница</a>

• next: указывает на следующую страницу в последовательности страниц.

  <a href="https://www.example.com/next" rel="next">Следующая страница</a>

• author: указывает, что ссылка ведет к странице автора контента.

  <a href="https://www.example.com/author" rel="author">Автор</a>

• bookmark: указывает, что ссылка является закладкой.

  <a href="https://www.example.com" rel="bookmark">Закладка</a>

• license: указывает, что ссылка ведет к лицензии контента.

  <a href="https://www.example.com/license" rel="license">Лицензия</a>

• tag: указывает, что ссылка ведет к категории или разделу, с данным тегом.

  <a href="https://www.example.com/tag" rel="tag">Тег</a>

• Комбинирование значений: несколько значений, разделенных пробелами.

  <a href="https://www.example.com" rel="noopener noreferrer">Тег</a>

Примеры использования атрибута target тега <a> в HTML

• _self (значение по умолчанию): открывает ссылку в текущей вкладке.

  <a href="https://www.example.com" target="_self">Открыть в текущей вкладке</a>

• _blank: открывает ссылку в новой вкладке или новом окне, если есть соответствующие настройки браузера.

  <a href="https://www.example.com" target="_blank">Открыть в новой вкладке</a>

• _parent: если текущий документ находится внутри фрейма, то открывает ссылку в родительском фрейме. Если текущий документ не находится внутри фрейма, то поведение аналогично _self.

  <a href="https://www.example.com" target="_parent">Открыть в родительском фрейме</a>

• _top: если текущий документ находится внутри фрейма, то открывает документ в самом верхнем контексте просмотра. Если текущий документ не находится внутри фрейма, то поведение аналогично _self.

  <a href="https://www.example.com" target="_parent">Открыть в верхнем контексте просмотра</a>

• _unfencedTop: действует как _top и при этом игнорирует границы изолированного фрейма.

  <a href="https://www.example.com" target="_unfencedTop">Открыть в верхнем контексте просмотра</a>

Примеры использования атрибута type тега <a> в HTML

Указывает на MIME type целевого ресурса. Вот примеры некоторых из них:

• text/html: указывает, что цель ссылки — HTML-документ.

  <a href="https://www.example.com" type="text/html">HTML документ</a>

• text/plain: указывает, что цель ссылки — текстовый файл без форматирования.

  <a href="https://www.example.com/file.txt" type="text/plain">Текстовый файл</a>

• application/pdf: указывает, что цель ссылки — PDF-документ.

  <a href="https://www.example.com/document.pdf" type="application/pdf">PDF документ</a>

• image/jpeg: указывает, что цель ссылки — изображение в формате JPEG.

  <a href="https://www.example.com/image.jpg" type="image/jpeg">JPEG изображение</a>

• application/json: указывает, что цель ссылки — JSON-файл.

  <a href="https://www.example.com/data.json" type="application/json">JSON данные</a>

• audio/mpeg: указывает, что цель ссылки — аудиофайл в формате MP3.

  <a href="https://www.example.com/audio.mp3" type="audio/mpeg">Аудиофайл</a>

• video/mp4: указывает, что цель ссылки — видеофайл в формате MP4.

  <a href="https://www.example.com/video.mp4" type="video/mp4">Видеофайл</a>

Советы по использованию тега <a>

• Используйте ключевые слова в описании ссылок и атрибуте href для улучшения SEO.
• Избегайте использования громоздких URL, они должны быть читаемыми.
• Не забывайте проверять все ссылки на актуальность, чтобы избежать 404 ошибок.
• Внешние ссылки должны вести на авторитетные источники.

Часто задаваемые вопросы (FAQ)

1 Можно ли использовать несколько атрибутов в теге <a>?

Да, атрибуты можно комбинировать.

2 Как сделать ссылку на электронную почту?

Для того, чтобы сделать ссылку на электронную почту, используйте атрибут href с значением mailto:example@example.com.

Заключение

Тег <a> является важным элементом HTML. Понимание его работы и правильное использование поможет связывать контент, улучшать навигацию и повысить видимость сайта в поисковых системах. Используя правильный синтаксис и атрибуты, можно значительно повысить удобство использования сайта. Не забывайте следить за актуальностью ссылок и их содержимым, чтобы обеспечить пользователям лучший опыт.

Для дополнительной информации о теге <a>, можно ознакомиться с официальной документацией на сайте MDN.