Html href атрибут

Абсолютные адреса

Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.

Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.

Этот URL может быть разбит на три части:

• протокол http://
• домен ireallylovecats.com
• путь к файлу gallery.html

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

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

В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:

Значение атрибута оканчивается определённым текстом

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

{ Описание правил стиля }
Селектор { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным
текстом. А во втором — только к определённым селекторам.

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для
ссылок на сайты других доменов вроде com, как показано в примере 13.4.

Пример 13.4. Стиль для разных доменов

HTML5CSS 2.1IECrOpSaFx

В данном примере содержатся две ссылки, ведущие на разные домены — com
и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая
картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com».
Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес
страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль
применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4. Добавление картинки к ссылкам

Ссылка в html элемент

Чтобы создать гиперссылку мы должны использовать тег этот тег является парным и выглядит следующим образом.

<a href="webupblog.ru">Текст ссылки</a>

Атрибут href

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

Различают несколько видов путей:

Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.

<a href="/about.html">О сайте</a>

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

<a href="http://webupblog.ru/ob-avtore/">Об авторе</a>

Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.

Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.

<a href="#top">Вверх</a>

Атрибут title

Используется для дополнительного описания ссылки. Заголовок мы можем увидеть когда наведем курсор на гиперссылку. Этот атрибут не обязательный, но иногда бывает полезным.

<a href="#top" title="После клика вы перейдете к шапке сайта.">Вверх</a>

Атрибут target

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

_blank — открывает ссылку html в новом окне_self — открывает в текущем окне

Атрибут rel

Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.

<a href="http://webupblog.ru/ob-avtore/" rel="author" >Об авторе</a>

Атрибуты и свойства тега

1. Атрибут target=»параметр», который может принимать следующие значения:

• _blank — открывает страницу в новом окне
• _self — загружает страницу в текущее окно
• _parent — загружает страницу во фрейм-родитель
• _top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример с target

В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.

Чаще всего применяется значение _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.

Пример с подсказкой title

Преобразуется на странице в следующее:

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

3. Атрибут class=»название класса» задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Пример

Преобразуется на странице в следующее:

как заработать на сайте

Поясню выше описанный пример. Класс, в котором мы описали тег <a> называется list. Давайте разберемся, что значат приписки visited, link и hover.

• a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
• a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку «:link», поскольку a.класс — делает то же самое).
• a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.

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

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

Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel=»nofollow», чтобы сохранить вес на Вашем сайте.

4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей

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

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Пример создания навигационной графической панели сайта

В элемент a можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее, чем текстовые. Здесь, однако, нас подстерегает не очень приятный сюрприз — изображения, заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img:

<a href="/"><img src="/appfiles/img/image.svg" alt="Logo Mama" /></a>

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

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

Кажется, что все просто: берем изображение, размещаем его на странице… Что может быть проще? Однако, различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом, мы приходим к необходимости разрезать рисунок на несколько частей.

Вот что получилось у меня:

В результате, у нас есть три «кнопки» — гиперссылки «Назад», «Содержание» и «Вперед». Разместим все это добро на странице:

Шаг 1 — Листинг навигационная панель.

<div style="text-align: center;">
    <img src="navbar/navbar01.gif" alt="" />
    <img src="navbar/navbar02.gif" alt="Назад" />
    ...
    <img src="navbar/navbar09.gif" alt="" />
</div>

Как говорится — «Первый блин комом»! Между изображениями появились зазоры, хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому, что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять, удалив пробельные символы (переводы строки, табуляции…) между элеменнами img.

Шаг 2 — Листинг навигационная панель.

...<img src="navbar/navbar01.gif" alt="" 
><img src="navbar/navbar02.gif" alt="Назад"
>...

Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, в качестве значения атрибута href используйте «#»:

Шаг 3 — Листинг навигационная панель.

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад"
><a>...

Полученный результат выглядит явно как то не так… Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border=»0″:

Шаг 4 — Листинг навигационная панель.

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" border="0"
><a>...

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

Таблицы

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<table>	Определяет содержимое таблицы.	Да	Да	Да	Да	Да	Да
<caption>	Определяет наименование таблицы.	Да	Да	Да	Да	Да	Да
<th>	Определяет заголовочную ячейку таблицы.	Да	Да	Да	Да	Да	Да
<tr>	Определяет строку таблицы.	Да	Да	Да	Да	Да	Да
<td>	Определяет ячейку данных таблицы.	Да	Да	Да	Да	Да	Да
<thead>	Используется для содержания заголовка группы в таблице (шапка таблицы).	Да	Да	Да	Да	Да	Да
<tbody>	Используется для содержания «тела» таблицы.	Да	Да	Да	Да	Да	Да
<tfoot>	Используется для содержания «подвала» таблицы (футер).	Да	Да	Да	Да	Да	Да
<col>	Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.	Да	Да	Да	Да	Да	Да
<colgroup>	Определяет группу столбцов в таблице.	Да	Да	Да	Да	Да	Да

Базовый HTML

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<!DOCTYPE>	Декларация, которая определяет тип документа, помогая браузеру отобразить веб-страницу правильно.	Да	Да	Да	Да	Да	Да
<html>	Сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке HTML.	Да	Да	Да	Да	Да	Да
<title>	Обеспечивает название для документа.	Да	Да	Да	Да	Да	Да
<body>	Определяет видимое содержимое страницы.	Да	Да	Да	Да	Да	Да
<h1>	Определяет заголовок первого уровня.	Да	Да	Да	Да	Да	Да
<h2>	Определяет заголовок второго уровня.	Да	Да	Да	Да	Да	Да
<h3>	Определяет заголовок третьего уровня.	Да	Да	Да	Да	Да	Да
<h4>	Определяет заголовок четвертого уровня.	Да	Да	Да	Да	Да	Да
<h5>	Определяет заголовок пятого уровня.	Да	Да	Да	Да	Да	Да
<h6>	Определяет заголовок шестого уровня.	Да	Да	Да	Да	Да	Да
<p>	Определяет параграф.	Да	Да	Да	Да	Да	Да
<br>	Устанавливает перевод строки в том месте, где этот тег обозначен.	Да	Да	Да	Да	Да	Да
<hr>	Тэг создает горизонтальную линию на HTML-странице, может использоваться в роли тематического разрыва.	Да	Да	Да	Да	Да	Да
<!—…—>	Тег комментария. Используются для временного отключения кода, либо в качестве подсказки. Текст внутри комментария не отображается браузером на странице.	Да	Да	Да	Да	Да	Да

Анкор для ссылки что это такое

Название “анкор” происходит от английского слова anchor, то есть «якорь». При этом анкоры выглядят как кликабельная фраза, которая может состоять как из нескольких ключевых слов, так и целого предложения, соответствующего тематике сайта. Благодаря этому пользователи еще до посещения ресурса получают возможность узнать, чему он посвящен. И правильно подобранные и размещенные анкоры могут оказывать значительное влияние на позицию сайта в выдаче поисковика. 

Виды анкоров для ссылок

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

1. Неразбавленные анкоры (или — с точным совпадением). Они представляют собой готовый поисковый запрос, без добавления в текст ссылки каких-либо уточняющих или дополняющих слов. Например, неразбавленный анкор может выглядеть так — «купить детские ботинки». 
2. Разбавленные анкоры (или — с частичным совпадением). Они содержат не только прямой поисковый запрос, но и какой-либо дополнительный текст. Для приведенного выше примера это могут быть такие варианты как «купить детские ботинки на мальчика» или «купить детские ботинки в Москве». 

Кроме того, иногда анкоры делят на высоко-, средне- и низкочастотные, то есть в соответствии с видами поисковых запросов. При этом высокочастотные анкоры обычно состоят буквально из пары слов, которые пользователи задают в качестве запросов поисковым системам. Обычно это неразбавленные анкоры, как в приведенном выше примере — купить детские ботинки. Среднечастотные анкоры включают уже больше слов и поэтому являются разбавленными — «купить детские ботинки на мальчика». 

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

Как составляют анкоры для ссылок

Следует придерживаться следующих правил: 

1. Предварительный расчет количества анкоров. Помимо их общего числа, нужно учитывать соотношение между двумя видами. Считается, что неразбавленных анкоров должно быть не более 30%, в то время как анкоров с частичным совпадением — до 75%. 
2. Читабельность. Хотя пользователи, делая запрос, не всегда соблюдают правила грамматики и орфографии, SEO-оптимизатор должен их придерживаться. Дело в том, что если ключевая фраза будет построена с ошибками, без соблюдения внутренней логики, поисковая система может принять ее за спам. 
3. Соответствие тематике сайта, на котором она размещается. Например, логично предположить, что ссылка с текстом «купить детские ботинки» будет размещаться на ресурсе, посвященном семье, воспитанию детей и другой подобной тематике, а не на сайте для автомобилистов. 
4. Уникальность. Если часто повторяются ключевые слова, то может произойти то, что оптимизаторы называют «склейкой анкоров». Поэтому желательно использовать хотя бы разные прилагательные. Например, «купить недорогие ботинки», «купить итальянские ботинки» и т. д.

Желательно, чтобы ключевые слова не повторялись, особенно в пределах одной ссылки. Иначе веб-сайт может попасть в «черный список». 

Написание и оформление анкоров — довольно сложная задача. Лучше всего — доверить ее профессиональным SEO оптимизаторам или копирайтерам. Тем более что сегодня существуют специальные биржи, на которых можно покупать как готовый контент, так и продукт, сделанный под заказ. 

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

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

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

Протокол для сайта можно не указывать, в таком случае ссылка будет начинаться сразу с // без протокола. Браузер сам подставит нужный протокол, на котором работает сайт. В примере 2 показано создание подобной ссылки.

Пример 2. Использование ссылки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href=»//facebook.com»>Facebook</a></p>
</body>
</html>

В данном примере ссылка вида <a href=»//facebook.com»>Facebook</a> является абсолютной и ведёт на главную страницу Facebook. Учтите, что при открытии такой страницы в локальном документе произойдёт ошибка, поскольку такие ссылки работают только на веб-сервере.

Когда в адресе указывается только домен (//webref.ru) или после домена идёт имя папки (//webref.ru/css/), то веб-сервер автоматически загружает документ, обычно с именем index.html или index.php. Таким образом, полный путь к сайту будет https://webref.ru/index.php, а сокращённый — //webref.ru.

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

Ссылки относительно текущего документа

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

1. Файлы располагаются в одной папке (рис. 3).

Рис. 3

Необходимо сделать ссылку из исходного документа source.html на target.html. В таком случае код будет следующий.

2. Файлы размещаются в разных папках (рис. 4).

Рис. 4

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

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 5).

Рис. 5

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

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 6).

Рис. 6

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

Заметьте, что никаких дополнительных точек перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

5. Файлы размещаются в разных папках (рис. 7).

Рис. 7

Каждый файл располагается в своей папке и чтобы перейти из одной папки в другую ссылка будет следующей.

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как «/folder/target.html». Так, запись <a href=»/course/»>Курсы</a> означает, что ссылка ведёт в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить файл index.html.

Опять же, такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега <body>.
Атрибуты являются необязательными и если они не указаны используются
значения по умолчанию.

link — определяет цвет ссылок на веб-странице
(цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки
меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный,
#FF0000.

vlink — цвет уже посещенных ссылок. Цвет
по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb,
где r, g и b обозначают соответственно красную, зеленую и синюю составляющую.
Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует
диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются
в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать
и ключевые слова. В данном примере цвет фона веб-страницы установлен черным,
а цвет ссылок — красным.

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет
для всех ссылок на веб-странице применяются следующие псевдоклассы, которые
добавляются к селектору A.

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка
становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

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

Пример 2. Цвет ссылок, заданных через стили

Параметр NAME

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Параметр name используется для определения якоря
внутри страницы. Вначале следует задать в соответствующем месте закладку и установить
ее имя при помощи параметра name тега <А>.
Имя ссылки на закладку начинается символом #, после
чего идет название закладки. Название выбирается любое, соответствующее тематике.
Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже
другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце
добавить символ решетки # и имя закладки.

Значение по умолчанию

Нет.

Пример 3. Создание якоря с помощью параметра name

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег А, параметр name</title>
</head>
<body>

<p><a name=»top»></a></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

<p><a href=»#top»>Наверх</a></p>

</body>
</html>

Значение атрибута содержит указанный текст

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

{ Описание правил стиля }
Селектор { Описание правил стиля }

В примере 13.5
показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

HTML5CSS 2.1IECrOpSaFx

Результат данного примера показан на рис. 13.5.

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Атрибут alt

Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

Другие полезные атрибуты анкора

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

Укажите язык целевого анкора: hreflang

Этот необязательный атрибут сообщает браузеру язык документа, на который ведет ссылка. Например, если нужно сообщить браузеру, что целевой источник написан на испанском, мы будем использовать в качестве значения hreflang соответствующий код языка в формате ISO 639-1.

Чтобы сообщить браузеру, что <a href="http://example.com" hreflang="es">ссылка</a>
 ведет на ресурс на другом языке, можно использовать атрибут 
<code> hreflang </ code>.

Атрибут rel

Атрибут rel используется для описания отношений между анкором и целевым источником. Например:

Эта статья была написана <a href="https://plus.google.com/+AuthorName"
rel="author">Отличным автором</a>.

Существует несколько значений, которые принимает атрибут rel:

• rel=»nofollow»: используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
• rel=»alternate»: если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
• rel=»bookmark»: это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
• rel=»help»: идентифицирует связанный ресурс как файл справки для страницы с этим значением.
• rel=»license»: используйте этот атрибут для ссылки на лицензию авторских прав.
• rel=»next»: используйте это значение для ссылки на следующий документ из серии.
• rel=»prev»: используйте это значение для ссылки на предыдущий документ из серии.
• rel=»noreferrer»: если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.

Атрибут type

Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type=»text/html», чтобы сообщить браузеру, что ссылка указывает на HTML-документ.

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

Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.

Навигация

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

Связанные элементы

Название элемента	Атрибуты	Примечания
link	href rel media title type	Элемент <link> используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS.
anchor	hreflang download target title href name	Элемент <a> используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице.
base	target href	Элемент <base> используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если <base> имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе.

Данная публикация является переводом статьи «Anchors & Links: How They Work In HTML» , подготовленная редакцией проекта.

Атрибут title

Рассмотрим следующий пример:

Пример HTML:

Попробуй сам

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

Имя атрибута title. В этом примере, мы дали ему значение .

Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.

При использовании атрибута title, большинство браузеров будет отображать его значение как «всплывающую подсказку», когда пользователь наводит указатель мыши на элемент.

Относительные или абсолютные ссылки?

Допустим, вы хотите связать первую страницу со второй. Наиболее прямой подход заключается в использовании абсолютного адреса. Таким образом, вы добавляете <a href=»http://ireallylovecats.com/gallery.html»>Перейти на вторую страницу</a> в файл index.html.

Поскольку эти два файла находятся в той же папке, вы можете использовать относительный адрес с помощью <a href=»first-blog-post.html»>. Это полезно, если вы решите переместить папку: ваши ссылки не будут нарушены, так как цели ссылок относительны друг к другу, до тех пор, как вы перемещаете оба файла одновременно и держите их в одной папке. Этот относительный подход особенно полезен при переключении доменов.