Трикод

Блог программиста {три::код}

URL: Всё о гиперссылках. target, href, type, rel

Всё о гиперссылках
ИсходникиДемо

Оглавление статьи

В этой статье мы рассмотрим простой тег <a>, для того, чтобы использовать гиперссылку на полную!
Гиперссылка является самым важным элементом любого web подобного приложения, ключевыми пользователями ссылок являются, конечно же бесчисленные сайты, соединяющиеся друг с другом гиперссылками, эти гипертекстовые документы становятся доступными для нас, простых смертных. К тому же знание тега <a>, влечет за собой улучшение SEO сайта.
Как создать гиперссылку? и многое другое будет рассмотрено в этой статье!

Структура гиперссылки

 
<a атрибут="свойство">текст гиперссылки</a>

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

Атрибуты гиперссылки

Приступим к изучению гиперссылки. Перечисленные атрибуты, будут рассмотрены подробней далее, с примерами.

  1. HREF="Целевой адрес гиперссылки, куда собственно она ведет."
  2. HERFLANG="Код языка документа гиперссылки."
  3. TITLE="Данный текст будет отображаться при наведении на ссылку."
  4. TARET="Указывает открывать ссылку в новом или в том же окне."
  5. REL="Relation, указывает но отношения целевого документа к текущему. В основном используется для "общения" с поисковыми ботами."
  6. TABINDEX="Определяет последовательность перехода по элементам через клавишу Tab."
  7. NAME="Устаревший атрибут для создания якорей."
  8. ID="Для создания якорей следует использовать этот атрибут."
  9. ACCESSKEY="Активирует ссылку по сочетанию клавиш."
  10. TYPE="Можно использовать для стилизации ссылок или при клике на ссылку, выдать файл на скачивание"
  11. MEDIA="Можно указать для какого устройства адаптирован документ."

На СЕО сайта влияет множество факторов, благодаря которым, наш сайт виден в поисковой выдаче. Алгоритмы поисковых систем постоянно совершенствуются. Основной инструмент любого поисковика, это гиперссылка и мы должны знать как её готовить, элементы как указание типа ресурса и другие увеличат дружелюбность сайта для пользователей.

Теперь перейдем к примерам

href и target

Переход гиперссылки. Создадим ссылку на внешний ресурс, которая будет открываться в новом окне:

 
<a href="http://ya.ru" target="_blank">Поиск в интернете</a>

Создадим ссылку на внутренний ресурс, которая будет открываться в том же окне:

 
<a href="/category/php" target="_blank">PHP уроки</a>

Указав относительный путь мы получили адрес: http://mysite.ru/category/php
Если адрес указать без обратного слеша, адресация пойдет на указанный адрес:

 
<a href="category/php" target="_blank">PHP уроки</a>
мы получим: http://category/php

Здесь мы использовали два атрибута "href" и "target".
Атрибут "href" может принимать относительные и абсолютные адреса: c:/document.html, http://parabyte.net/document, /document. Все внутренние ссылки сайта, лучше делать относительными.
Так же мы использовали атрибут "target". По умолчанию равен "_self", значит ссылка будет открываться в том же окне. Для того, чтобы ссылка открывалась в новом окне, как мы уже разобрали в примере, необходимо указать "_blank". Следующие значения используются для работы с фреймами. "_parent" - откроет целевой документ в родительском фрейме, "_top" - откроет документ в основном окне как "_self", отменив фреймы".

_blank VS _new

Иногда встречается "_new", свойство атрибута "target". Это свойство так же открывает ссылку в новой вкладке. Чем отличается "_blank", от "_new"?

 
<a href="/example" target="_new">Открыть в новой вкладке</a>

В документации не сказано про это свойство, однако описание его есть. Дело в том, что свойство _new, определяет имя окна в котором будет открываться. Отличие _new от _blank в том, что при клике на _blank будет всегда открываться новая вкладка, а при клике на _new ссылка откроется во вкладке с именем "_new", при повторном клике на ссылку со свойством атрибута target="_new", документ откроется в ранее созданном окне. Иначе говоря, десять ссылок с target="_blank" откроют десять вкладок, а десять ссылок с target="_new"откроются в одной вкладке, заменяя друг-друга.

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

Теперь, добавим всплывающую подсказку к ссылке.

title
 
<a href="/example" title="всплывающая подсказка">PHP уроки</a>

Здесь мы задействовали атрибут "title". Он станет виден при наведении мышкой на ссылку. Можно указывать дополнительное описание содержания целевого документа, для своих пользователей. Этот атрибут может влиять на поисковую оптимизацию, если отличен от заголовка страницы и текста ссылки.

herflang

Атрибут "herflang" не встречал. Сейчас, основные поисковики сами могут определить язык документа, причем не взирая на указание мета атрибута language.

 
<a href="/example/cook.html" herflang="en">Cook Book</a>

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

Управление ссылкой с клавиатуры

tabindex
 
<a href="/step1" tabindex="1">Шаг 1</a>
<a href="/step2" tabindex="2">Шаг 2</a>
<a href="/step3" tabindex="3">Шаг 3</a>
<a href="/done" tabindex="5">Отправить анкету</a>
<a href="/check" tabindex="4">Проверить данные</a>
<a href="/back" tabindex="-1">Предыдущий этап</a>

Мы можем задать последовательность перехода курсора по клавише Tab. По умолчанию осуществляет последовательный переход, так, как выстроены элементы в DOM. Для изменения последовательности следует указать целые положительные числа. Чтобы не осуществлять переход на ссылку, нужно указать целое отрицательное число.

accesskey
Пользователям своих сайтов, мы можем предоставить возможность активировать ссылку с клавиатуры. Например при заполнении формы, т.к. форма заполняется с клавиатуры, не всегда удобно тянуться за мышкой. Для примера в данной статье, я указал атрибут accesskey для ссылки anchor равным t (top).
 
<a href="#contents" accesskey="t"></a>

Для перехода к оглавлению данной статьи вы можете нажать на клавиатуре:
Internet Explorer, Chrome, Safari, Opera 15+: Alt + T;
FireFox и Opera 12 нужно нажать: Alt + Shift + T;
Mac, сочетание клавиш: Control + Alt + T"

Как целевой адрес ссылки якоря-закладки, я указал сам список-заголовок:

     
    ...

    СЕО атрибуты гиперссылки

    rel

    Перейдем, к одному важному для СЕО атрибуту "rel". Хоть изначальное назначение этого тега другое (relation, от анг. отношение), например: question, укажет на вопрос, а answer на ответ. Т.е. данная страница относится к <...>. Мы рассмотрим как этот атрибут используют Yandex и Google, возможно, этот атрибут аналогичным образом используют и другие поисковики.

     
    <a href="example.com" rel="nofollow">Best site</a>

    Определив значение как nofollow, вы запретите передавать по ссылке PageRank и ТИЦ, что немаловажно для СЕО, при определенной организации сайта.

    Было время, когда создавалось огромное количество мусорных сайтов. Одна "помойка" ссылалась на другую, всё это делалось для нужд мошенников, т.к. это помогало увеличить ТИЦ и PageRank, релевантность поисковой выдачи и доверие рядового пользователя. Ситуация изменилась когда поисковики стали обнулять ТИЦ и PageRank, таких бесполезных для пользователей сайтов. Однако, есть сайты где указание большого количества ссылок необходимо. Например, когда вы оставляете комментарий на каком-то сайте, не редко можно встретить поле URL, указав там свой сайт, он станет ссылкой, после того как вы оставите сообщение. На форумах, в профиле, вы так же можете указать свой сайт или в подписи. Где угодно, может быть куча ссылок, при этом сайт может быть доверенный. Почти в 100% случаев используется "rel=nofollow". Когда поисковой бот "Yandex" или "Google" находят этот атрибут, они не переходят по этой ссылке (этот тег был стандартизирован, но не известно как его используют другие поисковики). Зная это, можно запретить поисковикам переходить по ссылкам на страницы регистрации, входа и другие, которые не должны индексироваться.
    "rel=nofollow", можно указывать в мета теге, но о мета тегах я расскажу в другой статье

    Создание якорей, закладок (anchor)

    При написании этой статьи, я использовал якори(anchor). Они позволяют создать оглавление документа и дать возможность пользователю переходить по пунктам данного оглавления. Приведу пример из данной статьи:
     
    <ul id="contents">
        <li><a href="#structure">Структура гиперссылки</a></li>
        <li><a href="#attribute">Атрибуты гиперссылки</a></li>
        <li><a href="#example">Простые примеры создания ссылки&lt;</a></li>
        <li><a href="#key">Управление ссылкой с клавиатуры</a></li>
        <li><a href="#seo">SEO атрибуты ссылки</a></li>
        <li><a href="#anchor">Создание якорей или закладок (anchor)</a></li>
        <li><a href="#usability">Рассмотрим повышение юзабилити</a></li>
    </ul>

    Для указания точки перехода ранее использовался атрибут "name", сейчас доступен во всех браузерах атрибут "id".

     
    <h4 id="seo">СЕО атрибуты гиперссылки</h4>
    ...
    <p>Перейдем, к одному важному для СЕО атрибуту...
    ...
    </p><h4 id="anchor">Создание якорей, закладок (anchor)</h4>
    При написании этой статьи, я использовал якори (anchor)

    У ссылок в содержании я указал href="#имя якоря", к каждому заголовку я задал id="имя якоря".

    Фактически можно указать "id" любого тега (span, id, a, etc...), к которому будет осуществлен переход. Для возврата к содержанию, так же будем использовать закладку.
    В конце каждого раздела добавляем:

     
    <a href="#contents"></a>

    Еще рассмотрим как отменить переход по клику на ссылку. Точнее, средствами HTML мы не сможем отменить переход ссылки. Если указать решетку в значении атрибута href, то клик будет зафиксирован, но переход не осуществится. При этом, это совершенно валидный вариант. Который часто используется, например при создании меню, с использованием JavaScript.

     
    <a href="#">На месте</a>

    Повышаем дружелюбность сайта

    type
     
    <a href="/uploads/index.jpg" type="image/jpg">Приветствие</a>

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

    Думаю, самым вкусным применением данного атрибута является то, что можно указать браузеру, отдавать файлы на скачивание. Более правильный способ, это указание заголовков в header() в PHP (например), но не всегда есть возможность править код. Тут-то нам и поможет атрибут type:

     
    <a href="/uploads/index.jpg" type="application/octet-stream">Скачать</a>

    Таким образом мы сказали браузеру, что нужно выдать файл на скачивание, при помощи HTML.
    Тип application/octet-stream говорит браузеру, что нужно выдать поток данных документа указанного в ссылке. По этому, данный атрибут работает только при наличии атрибута href.

    media

    В данном атрибуте можно указать, под какое устройство заточен документ (говорилка, смартфон, айфон, принтер и т.п.). Принимает множественные значения через логические "and" (и), "not" (нет), "," (или).
    Среди значений: aural (синтезатор речи), braille (система Брайля), handheld (ручные устройства), print (принтер), screen (монитор компьютера). Пример с оф. дока:

     
    <a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
    Open media attribute page for print.</a>
    Хороший пример указания ориентации дисплея:
     
    <a href="/gallery/sky" media="all and (orientation: landscape)">
    Галерея облаков.</a>

    Я не стану клонировать официальную документацию. Когда буду оптимизировать сайт, затрону этот тег и дополню данную статью практическими примерами.

    Иногда можно встретить вопрос: "какие виды гиперссылки?". Как мы узнали из статьи вид гиперссылки один, но атрибутов множество.

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

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

    На этом всё, спасибо за внимание!
    Надеюсь, статья была полезная и вам понравилась наша работа над гиперссылками!

ИсходникиДемо
Поля со * обязательны.