Как создать ссылку в HTML-документе. Тег A — его синтаксис и атрибуты

Ссылки (или гиперссылки) пронизывают Интернет как кровеносные сосуды. Не будь ссылок – не было бы Интернета.

Как создать ссылку в HTML документе и правильно прописать её атрибуты, что такое URL и как Поисковые Системы относятся к ссылкам – в этом очередном уроке для начинающих изучать HTML.

URL или «адрес» страницы в Интернет

Каждый HTML документ в Сети имеет свой «точный адрес». Его называют «УРЛом», от англ. URL — Uniform Resource Locator

что такое URL

Структура URL часто видна в адресной строке браузера. Он включает в себя:

Структура URL

  1. Название протокола – http:// или https://
  2. Домен сайта,
  3. папка или путь к папке, где этот документ находится,
  4. Имя файла (может быть не всегда).

Благодаря такому «точному адресу» и стало возможным ссылаться на этот документ из текста другого документа.

Тег <A> и его базовый синтаксис

Надеюсь, слово «синтаксис» вас уже не пугает 🙂

Как видите, после начала тега <A>, должен идти обязательный атрибут  href, который задаёт адрес документа, на который следует перейти.

Внутри самого тега-контейнера <A> стоит текст (хотя может быть и картинка), который и является текстом ссылки. Его ещё называют «Анкор» или просто — Якорь.

Абсолютная и относительная ссылка

В примерах выше, были использованы абсолютные ссылки. Такие, которые содержат полный URL документа.

В некоторых случаях, атрибут href не содержит полного URL с названием протокола и домена сайта. Если документ, на который ведёт ссылка, находится на том же сайте – можно использовать относительную ссылку, ведущую от того места, где находится сам документ.

относительная ссылка
Схема, когда применена относительная ссылка

Пример: ссылка из документа first.html ведёт на файл second.html, который находится в папке news

Относительная ссылка на каталог, уровнем выше текущего

Код:

Эта ссылка ведёт на файл first.html в «родительском» каталоге, т.е. на один уровень выше.

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

Атрибуты тега <A>. Как открыть документ по ссылке в новом окне

Для того, что бы документ по ссылке открывался в новой вкладке браузера, нужно использовать атрибут target="_blank"

Атрибут target blank
Атрибут ссылки target=»_blank»

Не злоупотребляйте им. Не нужно делать внутренние ссылки сайта с этим атрибутом. Пользователя будут раздражать «плодящиеся окна».

Вообще, с этим атрибутом target – целая история. Есть ещё целый ряд его значений, но все они используются сегодня крайне редко.

Это потому, что они предназначены для работы с сайтом на фреймах, ныне не популярных и, с приходом HTML5, уходящими в прошлое.

Заголовок ссылки. Атрибут title для тега <A>

Ещё один полезный атрибут — title="Текст, поясняющий куда ведёт эта ссылка"

Синтаксис:

Как видите, браузер выводит его как всплывающую подсказку. А ещё, его учитывают и поисковые системы.

Подсказка из атрибута для ссылки title
Подсказка из атрибута для ссылки title

Атрибут гиперссылки nofollow. Запрет передачи «траста» сайта по ссылке

Есть ещё один неоднозначный атрибут для ссылок rel="nofollow"

Он говорит Поисковым Системам, что документ по ссылке, возможно, не заслуживает доверия. При этом показатели доверия («траста») с сайта Источника, не передаются на сайт по ссылке.

Тема о «трасте» и ссылочном ранжировании ещё впереди, но если коротко, то «участь» сайтов в ВЫДАЧЕ Поисковых Систем зависит также и от количества ссылок, ведущих на этот сайт. Чем их больше, чем более авторитетные сайты ссылаются – тем больше доверие к сайту по ссылке.

В некоторых случаях, стоит «экранировать» ссылки этим атрибутом. Например, если вы пишите отрицательный отзыв о каком-либо сервисе.

Внутренняя ссылка или якорь внутри документа

В больших по объёму текстах, часто требуется установка так называемых «якорей» в логических частях документа. Потом, именно на это место, можно сослаться.

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

При создании такого якоря вместо атрибута href используют атрибут name

Синтаксис при создании якоря:

При создании ссылки, в конце URL добавляют через знак # – имя «якоря»:

Переход будет точно к этому месту, т.е. браузер поместит это место в своей верхней видимой части.

Часто, в длинных документах, в самом низу ставят такую ссылку «Наверх».

Пример:

… совершив путешествие по миру ароматных зерен, нашли самые высококачественные из тех, которыми славятся Африка, Азия, Центральная и Южная Америка . Поэтому сегодня в кофейнях бренда Coffee bean вы встретите лучшие кофейные сорта от признанных мировых производителей.

Наверх ?

Из другого документа можно также выйти к этому месту, если добавить в конце URL через знак #имя_якоря

Якорь ссылки – картинка

Ссылкой может быть и любая картинка.

Код:

По умолчанию, ссылки подчёркиваются браузером сплошной синей чертой, а ссылки-картинки приобретают синюю рамку.

ссылки-картинки приобретают синюю рамку
Ссылки-картинки приобретают синюю рамку

Что бы избавится от неё – в файл CSS для сайта добавляют простое правило:

Это указание сделать нулевую толщину бордюра у всех ссылок-картинок.

Продолжение

В следующем посте, я расскажу о почтовых ссылках, их атрибутах и методах «предохранения» от злобных спамеров 🙂

Поделиться этим: