abuzov.com » HTML » Справочник HTML » HTML тэг <a>
HTML тэг <a>

<a> (от англ. anchor — якорь) используется как гипертекстовая ссылка. Ссылка может быть на другую страницу, часть страницы или любое другое место в сети.

Якорь как точка на странице, на которую можно перейти по ссылке, не нужно определять с помощью тега <a>. Этого можно добиться, применив атрибут id к любому тегу.

Атрибуты

Атрибут Описание Возможные значения
href Целевой адрес ссылки. URL.
target Указывает браузеру в каком окне открывать ссылку.
  • _self: открыть ссылку в текущем окне / вкладке.
  • _blank: открыть ссылку в новом окне / вкладке.
download Указывает что цель должна быть загружена (скачивание файла). Нет.
rel Связь между страницей и целевым назначением ссылки.
  • alternate: альтернативная версия текущей веб-страницы.
  • author: страница, содержащая данные об авторе страницы / статьи.
  • bookmark: ссылка на текущий раздел страницы.
  • help: помощь в зависимости от контекста.
  • license: авторские права на документ.
  • next: страница находится в последовательности, ссылка ведет на следующую в последовательности страницу.
  • nofollow: значение указывает роботам поисковых систем о том, что гиперссылку не нужно сканировать (переходить по ней).
  • noreferrer: указывает браузеру не отправлять заголовок реферера HTTP при переходе по ссылке.
  • prefetch: связанный ресурс должен быть кэширован.
  • prev: страница находится в последовательности, ссылка ведет на предыдущую в последовательности страницу.
  • search: средство поиска, которое можно использовать для поиска в текущих и связанных документах.
  • tag: термин тегирования (не путать с тегами HTML), применяемый к ссылке.
hreflang Целевой язык ссылки. Используется только тогда, когда используется атрибут href. Языковой код, например ru (Русский) или en (Английский).
type MIME тип связанного ресурса. Текст.
Глобальные атрибуты

Описание и примеры

Гипертекстовая ссылка создается с помощью тега <a> </a>. Между открывающим и закрывающим тегом помещается текст (анкор) ссылки.

Стандартный стиль отображения гипертекстовой HTML ссылки – синий текст с подчеркиванием. При наведении курсора на ссылку анкор меняет цвет.
URL (адрес) ссылки указывается в атрибуте href.

Пример:

Результат:

Текст… сайт abuzov.com

В результате выполнения кода пользователю виден только анкор (текстовая часть), а URL скрыт.

URL (Uniform Resource Locator) — унифицированный адрес ресурса, может быть абсолютным и относительным.

Абсолютный URL для этой страницы — https://abuzov.com/html/spravochnik-html/a/.

Относительный — /html/spravochnik-html/a/.

Путь для относительных ссылок имеет обозначения:
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше

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

Атрибут target определяет в каком окне будет открыта ссылка.

По умолчанию ссылки открываются в родительском (текущем) окне.

Ссылка якорь (закладка)

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

Пример — содержание данной страницы.
В самом содержании мы задаем ссылку со знаком # и словом-якорем (оно может быть любым, но не должно повторяться):

Далее по тексту мы присваиваем необходимый идентификатор:

При клике на слово- якорь мы переходим к элементу <h3 id="ancor">Ссылка якорь (закладка)</h3> на текущей странице.

Как сделать HTML ссылку на скачивание файла?

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

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

Результат:

Как сделать картинку ссылкой в HTML?

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

Результат (откроется в новом окне):

Ссылка картинка HTML

Как сделать ссылку на телефонный номер или адрес электронной почты?

Ссылка на телефонный номер создается следующим образом:

Результат:

Ссылка на адрес электронной почты:

При нажатии на ссылку на номер телефона с мобильного устройства он наберется в телефоне для вызова.

Результат:

При нажатии на ссылку на электронную почту запустится почтовый клиент установленный в вашей операционной системе по умолчанию.

Кнопка ссылка

Тут есть несколько вариантов решения. Наиболее правильный вариант это создание HTML формы. В качестве обработчика формы указываем целевую страницу.

Результат.

Как убрать подчеркивание ссылки в HTML?

Я уже говорил о том, что стандартный стиль отображения гипертекстовой HTML ссылки – синий текст с подчеркиванием.

Подчеркивание ссылки убирается с помощью CSS.

 

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

Результат будет одинаков.

Текст … ссылка текст…

Разница в том, что что с помощью CSS подчеркивание уберется для всех ссылок в документе (сайте), а во втором случае (style="text-decoration: none;") подчеркивание уберется только у одной ссылки.

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

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

Вы можете испольовать HTML теги и их атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">