15. Ссылки и якоря.

Контейнерный элемент a предназначен для создания ссылок и якорей.

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

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

При этом содержимое элемента a – это то, что нужно нажать, чтобы совершить переход (если это текст, то по умолчанию он будет выделен синим шрифтом и подчёркнут).

<a href="http://tut.by">Жми сюда!</a>
<a href="mailto:usr@domain?subject=Вопрос">...</a>
<a href="tel:+15085551212"> . . . </a>

В качестве содержимого элемента a можно указать элемент img. В этом случае переход по ссылке будет происходит при нажатию на картинку. По умолчанию такая картинка будет отображаться с синей границей. Чтобы убрать её, нужно установить у элемента img атрибут border="0" (или использовать CSS).

Для элемента a работают атрибуты accesskey, tabindex, title (рассматривались ранее).

Наличие логического атрибута download (HTML5) ведёт не к переходу по ссылке, а к скачиванию документа.

Атрибут hreflang указывает язык документа, на который ведет ссылка, а атрибут type даёт подсказку о MIME-типе документа (только подсказку).

По умолчанию, при переходе по ссылке документ открывается в текущем окне. Это может быть изменено атрибутом target.

Например, target="_blank" загружает страницу в новое окно браузера.

Атрибут rel определяет отношения между текущим документом и документом, на который ведёт ссылка.

Большинство браузеров не поддерживают rel, но можно встретить rel="nofollow". Поисковые системы не учитывают ссылки с таким атрибутом при расчёте индекса цитирования веб-сайтов.

Создание якоря

Чтобы создать якорь, в определённом месте документа располагают элемент a с заданным атрибутом name (в HTML5 устарел) или атрибутом id. Значение атрибута – это имя якоря. При этом контент в элементе a можно не размещать.

Для ссылки на якорь используют адрес вида #имя_якоря (в рамках одного документа) или вида url#имя_якоря (для якорей в других документах).

<a href="#n1">См.примечание в конце</a>
<p><a id="n1"></a>Это примечание</p>

В HTML5 ссылка выполняет переход не только на явно созданный якорь, но и на любой элемент по значению его атрибута id:

<a href="#n1">См.примечание в конце</a>
<p id="n1">Это примечание</p>