Тег <а> в HTML

Тег <а> в html дает возможность использовать переход по гиперссылкам. Пользователь, щелкнув кнопкой мышки на активной области ссылки, которой может быть текст (обычно подчеркнутый и синего цвета) или изображение, переходит в другое место страницы или к другому документу интернет.

Форма записи следующая:

<a href="https://websovet.pro">websovet.pro</a>

Между открывающим и закрывающим тегами помещается текст или тег <img> с названием графического файла, которые и создают активную область ссылки на странице. При попадании на нее изображение курсора мыши по умолчанию приобретает вид ладони.

Следует иметь в виду, что применение стилей CSS создает разнообразие вариантов оформления ссылок. Оно, например, дает возможность ввести зависимость вида ссылки от ее состояния, использовать самые различные виды кнопок, а также поменять внешний вид курсора при наведении.

Атрибуты

  • accesskey – активация ссылки комбинацией клавиш;
  • coords – определяет координаты активной области (не поддерживается в HTML5);
  • download – предлагает скачать файл, указанный по ссылке;
  • href – адрес документа для перехода;
  • hreflang – язык текста по ссылке, указывается в виде кода языка;
  • name – задает имя якоря (не поддерживается в HTML5, используйте вместо него атрибут id);
  • rel – отношение между связанным (по ссылке) и текущим документами (не поддерживается в HTML5);
  • rev – обратное предыдущему отношение (не поддерживается в HTML5);
  • shape – определяет форму ссылки (не поддерживается в HTML5, используйте вместо него <area>);
  • tabindex – последовательность перехода между ссылками при нажатии на кнопку Tab;
  • target – имя окна или фрейма для загрузки документа;
  • title – всплывающая подсказка;
  • type – MIME-тип документа по ссылке.

Собственно у тега <a>есть всего один обязательный атрибут ahref, который должен присутствовать при указании ссылки в html, поскольку без это уже будет не гиперссылка. Основные атрибуты рассмотрим ниже.

href

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

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

URL – адрес нужного документа, который может быть относительным или абсолютным.

Относительный адрес может использоваться, когда документ находится на том же сервере – это указание пути от главного документа сайта. Если нужный документ или файл находится в той же папке, то можно не указывать полный путь к нему, а указать только его имя:

<a href = "doc.html">……</a>

Если документ находится во вложенной папке указывается относительный путь к этой папке от главного документа:

<a href = "папка/подпапка/doc.html">……</a>

Также в href может быть указать скрипт js, например, href=”javascript:alert(‘Hello’);”.

name

В случае перехода внутри страницы используется атрибут name. Сама закладка указывается в коде страницы так:

<a name="anchor"></a>

где anchor – это уникальное имя якоря.

В ссылке, которая будет вести на эту закладку нужно указать следующий адрес:

<a href="#anchor">Анкор</>

то есть название якоря с символом # перед ним.

mailto

У атрибута href есть возможность указания почтового ящика.

<a href = "mailto:aaaa@bbbb.ru">Email</a>

При клике у посетителя произойдет попытка открытия почтового клиента и создания нового письма с адресом отправителя, указанным после mailto.

tel

С помощью tel можно указать номер телефона и при нажатии на ссылку начнется дозвон по нему. Это очень удобно на мобильных телефонах и фактически стало стандартном для мобильной верстки.

<a href="tel:+4733378901">+47 333 78 901</a>

download

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

<a href="img.jpg" download>Скачать файл</a>

target

Определяет тип окна или фрейма, в котором будет открыт документ или файл.

Значения атрибута:

  • _blank – новое окно;
  • _self – текущее окно;
  • _parent – родительский фрейм;
  • _top – отмена всех фреймов и загрузка в полном окне;
  • framename – указанный фрейм.

В случае отсутствия фреймов значения _parent и _top работают как _self. Значение по умолчанию – _self.

Синтаксис: <a href="/" target = "_blank"> – откроет страницу в новом окне.

title

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

<a href="/" title="этот текст всплывет">Анкор</a>

tabindex

Порядок перехода между ссылками при нажатии на кнопку Tab. Перемещение между ссылками происходит по нарастанию чисел. По умолчанию выключен.

<a href="/" tabindex ="1">Анкор</a>

rel

указание на то, чем является документ по ссылке текущему.

<a href="page.html" rel = "author">

У rel много значений. Приведем лишь некоторые:

  • author – ссылка на страницу об авторе;
  • bookmark – постоянная ссылка на раздел или запись;
  • contact – контактная информация;
  • details – страница с деталями;
  • index – содержание;
  • license – страница с лицензионным соглашением или авторскими правами;
  • nofollow – не передавать по ссылке вес.

Больше значений можно найти здесь.

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

Делать кнопку ссылкой нежелательно в силу того, что кнопка по своему предназначению инициирует действие, а не переход на другой ресурс. Но если нужно, можно такое сделать. В этом случае используем событие onclick. На примере ниже при нажатии на кнопку произойдет переход на страницу page.html.

<button onclick="document.location='page.html'">Другая страница</button>

Стилизация

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

На примере:

  • первая ссылка зеленого цвета с красным подчеркиванием при наведении;
  • вторая – при наведении подчеркивание в виде прерывистой линии;
  • третья – стилизована под кнопку.

Из кода можно увидеть все применяемые свойства.

See the Pen
стилизация ссылок
by Андрей (@adlibi)
on CodePen.

Оцените статью
Инструкции для Web
Добавить комментарии