Код ссылки (тег <a>) | HTML

Простой генератор ссылок

Атрибут ссылки href

Элемент станет гиперссылкой, если тег a будет содержать атрибут href. В качестве значения href принимается адрес веб-страницы. Его называют URL. Он показан в адресной строке браузера.

Подробнее о том, что такое ссылка и где находится адресная строка браузера

<a href="URL">анкор</a>
Пример: <a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-a-element">стандарт w3.org</a>
Результат: стандарт w3.org

Всегда ли URL в ссылке начинаются с http://?

В теге a URL можно сокращать согласно установленным правилам. Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.

Пример: <a href="/2013/01/absolute-relative-links.html">подробнее про относительные ссылки</a>
Результат: подробнее про относительные ссылки
Установленная на http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html приведёт на http://shpargalkablog.ru/2013/01/absolute-relative-links.html
Установленная на https://ru.wikipedia.org/wiki/Ссылка приведёт на /2013/01/absolute-relative-links.html

Когда используется слеш (символ /) в конце URL

Эти страницы для поискового робота являются разными. Они дублируют содержание друг друга (подробнее). 

http://shpargalkablog.ru
http://shpargalkablog.ru/

Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/ ), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/ . С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel="canonical". Если ссылка будет иметь вид 

<a href="http://shpargalkablog.ru">Главная страница Шпаргалки блоггера</a>
то посетитель или, в случае rel="canonical" только поисковый робот, сначала попадёт на http://shpargalkablog.ru , а потом его перебросит на http://shpargalkablog.ru/.

Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера. Как скопировать URL из строки браузера

Веб-документы, имеющие окончание, скажем, .html, .png, .css, считаются конечным файлом и косую черту после них писать не желательно. То есть 

http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html

Ссылка к заданному месту текста

На странице каждое значение идентификатора (id) должно употребляться только один раз. В CSS селектор id распознаётся благодаря хэшу (символ #) перед значением идентификатора.

<тег id="имя_закладки">анкор</тег>
Пример: <style> #tut { background: yellow; } </style> <div id="tut">закладка №1</div>
Результат:
закладка №1

Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным. 

http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut
<a href="URL#имя_закладки">анкор</a>
Пример: <a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut">ссылка к закладке №1</a>
Результат: ссылка к закладке №1
Пример: <a href="#tut">относительная ссылка к закладке №1</a>
Результат: относительная ссылка к закладке №1
Пример: <a href="http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#ul">ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»</a>
Результат: ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»

В CSS есть псевдокласс :target, который отвечает за внешний вид элемента, чей селектор присутствует в URL.

Пример: <style> #zdes:target { background: red; } </style> <div id="zdes">закладка №2</div> <a href="#zdes">ссылка к закладке №2, которая (закладка) поменяет свой фон</a>
Результат:
закладка №2
ссылка к закладке №2, которая (закладка) поменяет свой фон

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

Пример: <style> .hash:target:before { content: ""; display: block; height: 14em; margin-top: -14em; visibility: hidden; } </style> <div id="tam" class="hash">закладка №3</div> <a href="#tam">ссылка перенесёт на 14em над закладкой №3</a>
Результат:
закладка №3
ссылка перенесёт на 14em над закладкой №3

Если в атрибуте href оставить только символ решётки, то при нажатии на ссылку человек попадёт к началу страницы. Сей элемент с помощью CSS стилей можно зафиксировать на экране и благодаря JavaScript показывать не сразу, а только после прохождения первого экрана (см. подробнее как это сделать).

<a href="#">анкор</a>
Пример: <a href="#">наверх</a>
Результат: наверх

Поисковые системы не рассматривают дубликатами друг друга URL вида 

http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes

Ссылка для отправки почты

В качестве URL следует указать mailto:адрес_электронной_почты. Несколько адресов можно перечислить через запятую. Параметры cc=копия, bcc=скрытая_копия, subject=тема, body=письмо не являются обязательными и объединены с помощью &.

<a href="mailto:email?cc=копия&bcc=скрытая_копия&subject=тема&body=письмо">анкор</a>
Пример: <a href="mailto:n.mitra@yandex.ru">n.mitra@yandex.ru</a>
Результат: n.mitra@yandex.ru
Пример: <a href="mailto:n.mitra@yandex.ru,n.mitra@yandex.ru?subject=Вопрос по коду ссылки">служба поддержки</a>
Результат: служба поддержки
Пример: <a href="mailto:?subject=Код ссылки в html&body=&lt;a href='http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html'&gt;http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html&lt;/a&gt;">поделитесь ссылкой с друзьями</a>
Результат: поделитесь ссылкой с друзьями

Звонок по телефону

Если нажать на ссылку, происходит набор номера на мобильных устройствах.

<a href="tel:номер">анкор</a>
Пример: <a href="tel:+79030000000">Позвонить</a>
Результат: Позвонить

Ссылка на скачивание файла

<a href="URL" download="имя_файла">анкор</a>
Пример: <a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download>скачать иконку смайлика</a>
Результат: скачать иконку смайлика
Пример: <a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download="smaylik">скачать иконку смайлика с именем файла «smaylik»</a>
Результат: скачать иконку смайлика с именем файла «smaylik»

Открыть ссылку в новом окне, новой вкладке, фрейме

* на странице есть указанный код ссылки * на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки
<a href="URL" target="_self">анкор</a>
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_self">показать смайлик в текущей вкладке или текущем iframe</a>
показать смайлик в текущей вкладке или текущем iframe
<a href="URL" target="_parent">анкор</a>
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_parent">показать смайлик в текущей вкладке или во фрейме-родителе</a>
показать смайлик в текущей вкладке или во фрейме-родителе
<a href="URL" target="_top">анкор</a>
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_top">показать смайлик в текущей вкладке</a>
показать смайлик в текущей вкладке
<a href="URL" target="_blank">анкор</a>
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_blank">показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)</a>
показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)
<a href="URL" target="name">анкор</a>
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="raz">показать смайлик в iframe с указанным name</a> <iframe name="raz" src=""></iframe>
показать смайлик в iframe с указанным name

Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.

Игнорируя желания пользователя, с помощью JavaScript можно открыть ссылку в новом окне любого размера, а не в новой вкладке. Но в таком окне нельзя будет поменять URL в адресной строке браузера.

rel может иметь несколько значений, разделённых пробелом, например, rel="nofollow noreferrer". У whatwg.org список значений несколько больше. В таблице указаны только те, которые имеют практическое применение, так как часто устройства учитывают лишь тег link: rel="prefetch" в Mozilla Firefox [developer.mozilla.org] и Google Chrome [developers.google.com], rel="next" и rel="prev" для Google [support.google.com].

<a href="URL" rel="sidebar">анкор</a>
<a href="#" rel="sidebar">добавить страницу в закладках браузера</a>
добавить страницу в закладках браузера
<a href="URL" rel="noreferrer">анкор</a>
<a href="http://shpargalkablog.ru/" rel="noreferrer">не будет показан URL, с которого пришёл пользователь</a>
не будет показан URL, с которого пришёл пользователь

Закрыть ссылку в nofollow

Поисковые системы рекомендуют закрывать в nofollow

  1. ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
  2. платные ссылки.
Тех, кто ослушается ждёт понижение в выдаче. Поэтому ссылки, оставленные посетителями (например, в комментариях) или требуют проверки, или автоматически закрываются nofollow.

Не нужно закрывать в nofollow абсолютно все внешние ссылки. Не нужно закрывать в nofollow внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше скрыть от поисковиков с помощью Ajax.

<a href="URL" rel="nofollow">анкор</a>
Пример: <a href="https://support.google.com/webmasters/answer/96569?hl=ru" rel="nofollow">не передает ни PageRank, ни текст ссылки</a>
Результат: не передает ни PageRank, ни текст ссылки

Поясняющий текст к ссылке при наведении курсора мышки

<a href="URL" title="всплывающая_подсказка_с_поясняющим_текстом">анкор</a>
Пример: <a href="http://shpargalkablog.ru/2013/12/title.html" title="про атрибут title: можно ли поменять его внешний вид, учитывается ли он поисковыми системами">наведи на меня</a>
Результат: наведи на меня

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

HTML анкор ссылки

Ссылка может содержать как блочные, так и строчные элементы.

Пример: <a href="#"><div>блочный: ссылкой является вся строка</div></a>
Результат:
блочный: ссылкой является вся строка
Пример: <a href="#"><span>строчный: ссылкой является только текст</span></a>
Результат: строчный: ссылкой является только текст

Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?

В качестве анкора нужно использовать HTML код картинки. Предварительно изображение нужно загрузить на хостинг сайта или в социальную сеть (ВКонтакте, Google+ и т.п.), чтобы у рисунка появился свой адрес в интернете — URL.

<a href="URL"><img src="URL" alt="описание изображения"/></a>
Пример: <a href="http://shpargalkablog.ru/2013/12/image-optimization.html"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a>
Результат: смайлик

На одной картинке можно сделать несколько ссылок на разные страницы.

Ссылка в CSS коде

Пример: <style> a { /* селектор ссылки */ color: gray; } /* псевдоклассы, которые применимы только для ссылок */ a:link { /* не посещённые ссылки */ color: blue; } a:visited { /* посещённые ссылки */ color: green; } /* псевдоклассы, которые применимы для любых элементов */ a:hover { /* при наведении */ color: orange; } a:focus { /* при фокусе, для его работы в некоторых браузерах нужно указать атрибут tabindex */ color: red; } a:focus:hover { /* при наведении, когда ссылка в фокусе */ color: purple; } a:active { /* при нажатии */ color: yellow; } </style> <a href="http://shpargalkablog.ru/2012/02/psevdoklassy-css.html">Что такое псевдоклассы в CSS</a>
Результат: Что такое псевдоклассы в CSS

С помощью стилей CSS из ссылки можно сделать кнопку, из нескольких ссылок — меню.

Как изменить цвет ссылки

Пример: <a href="#" style="color: #ff0000;">ссылка красного цвета</a>
Результат: ссылка красного цвета

В атрибуте style нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id (для одной ссылки) или class (для нескольких) и прописать стиль либо в отдельном файле .css либо в теге style.

Пример: <style> .raz3 { color: saddlebrown; } .raz3:hover { color: green; } </style> <a href="#" class="raz3">ссылка коричневого цвета, при наведении зелёного</a>
Результат: ссылка коричневого цвета, при наведении зелёного

Значение свойства color может быть указано ключевым словом, например, red, green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000

Подчёркивание ссылки

За подчёркивание текста отвечает свойство text-decoration, элемента — border-bottom.

Пример: <a href="#" style="text-decoration: none; border-bottom: 1px dashed;">подчеркивание ссылки пунктиром</a>
Результат: подчеркивание ссылки пунктиром
Пример: <style> .raz5 { text-decoration: none; /* убрать подчёркивание */ } .raz5:hover { text-decoration: underline; /* добавить подчёркивание при наведении на ссылку курсора мышки */ } </style> <a href="#" class="raz5">подчеркивание ссылки появляется только после наведения на неё</a>
Результат: подчеркивание ссылки появляется только после наведения на неё
Пример: <style> .raz4, .raz4:hover { /* display: inline-block; для длинных ссылок, которые размещаются на нескольких строчках */ position: relative; margin: 3px; /* отступ от ссылки, особенно актуально для адаптированных под сенсорные устройства сайтов, где нажать по коротким рядомстоящим ссылкам проблематично */ padding: 3px; text-decoration: none; /* убрать подчёркивание */ color: blue; } .raz4:active { /* вид для активной ссылки */ background: #ccc; color: #fff; } .raz4:after, .raz4:before { /* появляющаяся при наведении рамка */ content: ""; position: absolute; /* выравнять по центру */ left: -1px; right: 0; top: -1px; bottom: 0; z-index: -1; width: 0; height: 0; margin: auto; border: 0px solid #808991; } .raz4:after, .raz4:hover:before { height: 100%; } .raz4:before, .raz4:hover:after { width: 100%; } .raz4:hover:before { height: calc(100% + 2px); border-width: 0 1px; transition: .7s; } .raz4:hover:after { width: calc(100% + 2px); border-width: 1px 0; transition: .7s; } </style> <a href="#" class="raz4">красивые текстовые ссылки</a>
Результат: трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам

в f t
наверх ↑

20 комментариев:

Tulyka
Делаю всё также, как написано здесь. Вроде бы всё правильно: и якорь с латинским именем находится в нужном месте и ссылка на него сделана в соответствии с требованиями. Публикую сообщение и пытаюсь посмотреть что же у меня в итоге вышло? В итоге, ничего не вышло. Для проверки результата, жму на ссылку, в надежде оказаться в нужном месте текста (или блога), а меня, с просматриваемой страницы блога, выкидывает назад, в редактор сообщений. Почему так?
NMitra
Да, вспомнила об особенности Blogger. Зайдите снова в редактируемое сообщение, но на вкладку "Изменить HTML" (или "HTML" для нового редактора), там подчистите хэш-ссылку до знака #. И не заходя на вкладку "Создать" сохраните.

Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.

Я редко пользуюсь вкладкой "Создать", поэтому уж подзабыла.
Tulyka
Я об этом тоже подумала, но уже после того, как написала Вам. Так оно и есть: если делаешь хэш-ссылку, то в визуальный редактор "Создать" нельзя даже и на секундочку заглянуть, до тех пор, пока не сохранишь сообщение с уже готовыми ссылками.
Наконец-то, получилось. ) Спасибо!
LVE
NMitra, подскажите, пожалуйста:
1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?

2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.?
NMitra
1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html

2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html
NMitra
stas_dayan, это не URL, а анкор. Мне такую красоту не нужно в комментариях не нужно ))
scooter
kak sozdati fon
NMitra
С помощью стилей CSS. Например, так

<a href="URL" style="background: green;">анкор</a>
NMitra
В комментариях стили не пропускаются.
Анонимный
Здравствуйте NMitra!

Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно...
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.

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

А если бы еще этот якорь как-нибудь при переходе подсвечивался... ну там бекграунд#FF0000 это было бы круто:)

С уважением, Владимир
NMitra
Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ
NMitra
Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/
Анонимный
NMitra, спасибо!

Отличное решение. Простой css, и всё работает (кроме background - ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)

С уважением, Владимир
NMitra
Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background
Alex Fialka
Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы?
NMitra
Здравствуйте, вместо смайлика свою картинку

<a href="#footer-1"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a>

Использовала id из http://fialkaa.blogspot.ru/ То есть id элемента, который находится как можно ближе к низу страницы.
Анонимный
Привет. Подскажите пожалуйста, есть кнопка размером 220x58, сделанная в css, и в её центре надпись, которая является ссылкой. Но сам элемент ссылки распространяется только всю ширину блока, то бишь на 100%, так как заключён в тег "center", но без него никак. А нужно чтобы ссылка была такой же, как и размер фона за текстом - 220х58, при этом должна оставаться в теге "center".
NMitra
Привет. Без кода что-то трудно сказать

Пример http://jsfiddle.net/NMitra/q49o7st6/

<style>
.raz {
display: block;
width: 220px;
height: 58px;
margin: 0 auto;
background: green;
}
</style>

<a href="#" class="raz"></a>

Возможно вам вот это поможет http://shpargalkablog.ru/2015/02/h1-seo.html#img (Утверждение 2)
Unknown
Спасибо огромное, генератор ссылки просто спасения для чайника :) по мелочам когда делаю что-то, экономит уйму времени!
NMitra
Я тоже периодически им пользуюсь :) Вроде знаю уж как всё пишется и всё равно...