A href в html: Атрибут href | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.1+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты

accesskey
Активация ссылки с помощью комбинации клавиш.
coords
Устанавливает координаты активной области.
download
Предлагает скачать указанный по ссылке файл.
href
Задает адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
name
Устанавливает имя якоря внутри документа.
rel
Отношения между ссылаемым и текущим документами.
rev
Отношения между текущим и ссылаемым документами.
shape
Задает форму активной области ссылки для изображений.
tabindex
Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.
type
Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

— HTML | MDN

HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.

<a href="https://developer.mozilla.org">MDN</a>

Этот элемент включает в себя общие атрибуты.

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

Примечание:

  • Атрибут может быть использован вместе с blob: URLs и data: URLs, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью  JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
  • Если представлен HTTP-заголовок Content-Disposition:, и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
  • Если этот атрибут установлен и Content-Disposition: установлен на inline, Firefox отдаёт преимущество Content-Disposition, но в тоже время Chrome отдаёт преимущество атрибуту download.
  • Этот атрибут соблюдается только на ресурсах с тем же  доменом.
href
Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут 
href
 указывает ссылку: либо URL, либо якорь. Якорь — это название после символа #, который указывает на элемент (ID (en-US)) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, file, ftp и mailto работают в большинстве браузеров.
hreflang
Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан href.
ping HTML5
Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
referrerpolicy
Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:
  • "no-referrer" не отправляет заголовок Referer.
  • "no-referrer-when-downgrade" не отправляет заголовок Referer ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
  • "origin" отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
  • "origin-when-cross-origin" отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь. 
  • "unsafe-url" отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
rel
Для ссылок, которые содержат атрибут href, этот атрибут устанавливает отношения между ссылками. Значением является список значений, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является void, если не задано иное. Используйте этот тег, только если задан атрибут href
.
target
Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:
  • _self загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.
  • _blank загружает документ в новой окне в HTML4 или вкладке в HTML5.
  • _parent загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как
    _self
    : Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как _self.
Используйте этот атрибут только если указан href.

Примечание: Используя target, вы должны добавлять rel="noopener noreferrer", чтобы избежать эксплуатацию API

window.opener.

type
Этот атрибут определяет MIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как audio/wav.
Используйте этот атрибут только если указан href.

Устаревшие 

charset Вышла из употребления с версии HTML5
Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми список кодировок. Значением по умолчанию является ISO-8859-1.

Предупреждение: Этот атрибут является устарелым в HTML5 и не должен использоваться. Чтобы достичь такого же эффекта, используйте HTTP-заголовок Content-Type на ссылающемся ресурсе.

coords HTML 4Вышла из употребления с версии HTML5
Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
name HTML 4 Вышла из употребления с версии HTML5
Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением id и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и
id
, и name могут быть использованы с элементом <a>, пока у них идентичные значения.
rev HTML 4 Вышла из употребления с версии HTML5
Этот атрибут определяет обратную ссылку, обратные отношения атрибута rel. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.
shape HTML 4 Вышла из употребления с версии HTML5
Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута —
circle
, default, polygon и rect. Формат координат зависит от выбранной формы. Для circle — x, y, r, где x и y — пиксельные координаты центра круга и r — радиус в пикселях. Для rect — x, y, w, h, где x и y — координаты верхнего левого угла прямоугольника, а w и h — ширина и высота соответственно. Значениями polygon для координатор формы являются x1, y1, x2, y2… Каждая пара x, y определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение default для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.

Примечание: Желательно использовать атрибут usemap для элемента <img> и связанного элемента <map>, чтобы определить горячие точки вместо атрибутов формы.

Нестандартные

datafld 
Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.

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

ПоддержкаGeckoPrestoWebKitTrident
Не реализованаНе реализованаНе реализованаIE4, IE5, IE6, IE7 (Убрана в IE8)
Нормативный документMicrosoft’s Data Binding: dataFld Property (MSDN)
datasrc 
Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.

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

ПоддержкаGeckoPrestoWebKitTrident
Не реализованаНе реализованаНе реализованаIE4, IE5, IE6, IE7 (Убрана в IE8)
Нормативный документMicrosoft’s Data Binding: dataSrc Property (MSDN)
methods 
Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута title) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значения methods (MSDN).
urn 
Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).

Ссылка на внешний сайт

Создание кликабельной картинки

<a href="https://developer.mozilla.org/ru/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo">
</a>
Результат:

Создания ссылки для написания письма

Создание ссылки с номером телефона

С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.

<a href="tel:+491570156">+49 157 0156</a>

Для дополнительных деталей о протоколе tel, смотрите RFC 2806 и RFC 2396.

Использование

download для сохранения canvas как PNG

Если вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом download и данные canvas как data: URL:

var link = document.createElement("a");
link.innerHTML = 'download image';

link.addEventListener("click", function(ev) {
  link.href = canvas.toDataURL();
  link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

Вы можете посмотреть на это в действии: jsfiddle.net/codepo8/V6ufG/2/.

BCD tables only load in the browser

Нажатие на <a> приводит (по умолчанию) к фокусировке элемента, но оно может быть разным в зависимости от браузера и ОС.

Фокусируется ли элемент нажатием на <a>?

НастольныеWindows 8.1OS X 10.9
Firefox 30.0ДаДа
Chrome ≥39
(Chromium bug 388666)
ДаДа
Safari 7.0.5Нет данныхТолько с заданным tabindex
Internet Explorer 11ДаНет данных
Presto (Opera 12)ДаДа
МобильныеiOS 7.1.2Android 4.4.4
Safari MobileТолько с заданным tabindexНет данных
Chrome 35НеизвестноТолько с заданным tabindex

HTML 3.2 включает в себя только name, href, rel, rev и title.

Атрибут target не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, target не допускается в «строгих» вариантах XHTML, но разрешён в формах frameset или «переходных» формах.

Рекомендации по JavaScript

Часто якорь используется с событием onclick. Для избежания обновления страницы, href часто устанавливается на #, либо на javascript:void(0). Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и вы не допускаете стандартного поведения.

  • Другие элементы: <abbr>, <em>, <strong>, <small> (en-US), <cite>, <q> (en-US), <dfn>, <time>, <code>, <var> (en-US), <samp> (en-US), <kbd>, <sub> (en-US), <sup> (en-US), <b>, <i> (en-US), <mark>, <ruby>, <rp> (en-US), <rt> (en-US), <bdo>, <span>, <br>, <wbr>.

html — Что такое href = «#» и почему оно используется?

О гиперссылках:

Основное использование тегов привязки — <a></a> — это гиперссылок . Это в основном означает, что они куда-то вас заберут. Для гиперссылок требуется свойство href, поскольку оно указывает местоположение.

Hash:

Хеш — # в гиперссылке указывает идентификатор элемента html, на который следует прокручивать окно.

href="#some-id" прокрутит до элемента на текущей странице, например, <div>.

href="//site.com/#some-id" перейдет в site.com и выделите идентификатор на этой странице.

Прокрутите вверх:

href="#" не указывает имя идентификатора, но имеет соответствующее местоположение — верхнюю часть страницы. Нажав на якорь с помощью href="#", вы переместитесь в положение прокрутки вверх.

Просмотрите эту демонстрацию.

Это ожидаемое поведение в соответствии с документацией w3.

Заполнители гиперссылки:

Пример, где заполнитель гиперссылки имеет смысл, находится в предварительном просмотре шаблона. На одностраничных демонстрационных шаблонах я часто видел <a href="#">, так что тег привязки является гиперссылкой, но никуда не денется. Почему бы не оставить свойство href пустым? Пустое свойство href на самом деле является гиперссылкой на текущую страницу. Другими словами, это приведет к обновлению страницы. Как я уже говорил, href="#" также является гиперссылкой и вызывает прокрутку. Следовательно, наилучшее решение для заполнителей гиперссылок на самом деле — href="#!" Идея состоит в том, что, надеюсь, на странице нет элемента с id="!" (кто это делает !?), и поэтому гиперссылка ни на что не ссылается — так что ничего не происходит.

О тегах привязки:

Другой вопрос, который может вас заинтересовать: «Почему бы просто не оставить свойство href выключенным?». Обычно я слышал, что свойство href является обязательным, поэтому оно «должно» присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для того, чтобы якорь действительно был гиперссылкой! Прочтите это с w3 . Итак, почему бы просто не оставить это для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменяют стиль по умолчанию для тега привязки, который не имеет свойства href. Вместо этого он будет рассматриваться как обычный текст. Это даже меняет поведение браузера относительно элемента. Строка состояния (внизу экрана) не будет отображаться при наведении курсора на якорь без свойства href. Лучше всего использовать значение метки-заполнителя для привязки, чтобы убедиться, что оно рассматривается как гиперссылка.

Посмотрите эту демонстрацию , демонстрирующую различия в стиле и поведении.

Все о ссылках «A HREF REL» » Блог. ArtKiev Design Studio

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

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

Краткий перечень типов ссылок

ТипДля чего используется
alternateальтернативный способ отображения страницы
authorЗа ссылкой подробная информация об авторе
bookmarkПостоянная ссылка
helpСправка или информация помогающая с какой-то частью сайта или контента
licenseСсылка на информацию об авторском праве
nofollowСсылка, которую вы не рекомендуете. Возможно вы ее разместили их корыстных мотивов
prefetchРесурс, который скорее всего заинтересует пользователя. Сообщает браузеру, что его можно заранее поместить в кэш
searchПоиск по сайту
tagКлючевое слово или название категории сайта
nextСсылка на следующую страницу
prevСсылка на предыдущую страницу

Как определить тип ссылки?

Для определения типа используется атрибут rel

rel=alternate
Тип alternate указывает на то, что по этой ссылкой идет альтернативный вид отображения страницы. Например, это может быть PDF версия, или версия оптимизированная для печати.

<!-- PDF -->
<a rel="alternate" type="application/pdf" href="page.pdf">PDF версия страницы</a>

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

<a rel="alternate" hreflang="en" href="english-version.html">English version</a>

rel=author
Этот тип сообщает, что за ссылкой находиться подробная информация об авторе сайта или страницы.

<a rel="author" href="about.html">Про автора</a>

rel=bookmark
Данный тип ссылки говорит, что ссылка является постоянной и адрес этой страницы не меняется никогда.

<a rel="bookmark" href="about.html">Постоянная ссылка на страницу автора</a>

rel=help
Ссылка данного типа ведет к контенту справочного характера. Но есть важный момент. Help-ссылка контекстно-зависимая. Браузер сопоставит эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.

<form>
<label for="comment">Ваш комментарий:</label>
<textarea></textarea>
<input type="submit" value="Оставить комментарий">
<a rel="help" href="comments.html">Помощь по комментариям</a>
</form>

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

rel=license
Этот тип может использоваться когда ссылка ведет на лицензионное соглашение основного контента данной страницы. Ссылка данного типа должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что например у вас в подвале.

<a rel="license" href="license.html">Лицензия</a>

rel=nofollow
Этот тип сообщает, что поисковому роботу не следует воспринимать эту ссылку как ссылку, которую рекомендует публицист

<a rel="nofollow" href="license.html">Робот, не переходи на эту страницу</a>

rel=prefetch
Ссылки этого типа следует использовать когда вы ссылаетесь на некие внешние ресурсы, которые пользователь скорее всего откроет. Браузер закеширует заранее эту ссылку и она откроется очень быстро без всяких ожиданий.

<a rel="prefetch" href="license.html">Это обязательно нужно прочитать</a>

rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска

<a rel="search" href="search.html">Открыть поиск на сайте</a>

rel=tag
Ссылка данного типа ведет дает определения ключевого слова или категории сайта

<a rel="tag" href="search.html">Эта страница относится к странице поиска</a>

rel=next и rel=prev
Указывает и используется в постраничной навигации. Ссылка на следующую страницу имеет тип next, а на предыдущую – prev

<ul>
<li><a rel="prev" href="page-1.html">1 страница</a></li>
<li>Текущая страница</li>
<li><a rel="next" href="page-3.html">3 страница</a></li>
</ul>

Атрибут href



Определение и использование

Для элементов <a> и <area> атрибут href указывает URL-адрес страницы, к которой переходит ссылка.

Для элементов <base> атрибут href указывает базовый URL-адрес для всех относительных URL-адресов на странице.

Для элементов <link> атрибут href указывает расположение (URL) внешнего ресурса (чаще всего файл таблицы стилей).


Относится к

Атрибут href может использоваться для следующих элементов:


Пример

Пример

Атрибут href указывает назначение ссылки:

<a href=»https://html5css.ru»>Visit html5css</a>

Пример области

Изображение-карта, с щелчком области:


usemap=»#planetmap»>

<map name=»planetmap»>
  <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun»>
  <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury»>
  <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus»>
</map>

Базовый пример

Укажите базовый URL-адрес для всех относительных URL-адресов на странице:

<head>
<base href=»https://html5css.ru/images/»>
</head>

Пример ссылки

Ссылка на внешнюю таблицу стилей:

<link rel=»stylesheet» type=»text/css» href=»theme.css»>


Поддержка браузера

Атрибут href имеет следующую поддержку браузера для каждого элемента:

Элемент
aДаДаДаДаДа
areaДаДаДаДаДа
baseДаДаДаДаДа
linkДаДаДаДаДа

Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде

Обновлено 29 декабря 2020
  1. Что такое гиперссылка и якорь (anchor)
  2. Как создаются якоря и хеш ссылки
  3. Href — обязательный атрибут тега любой гиперссылки
  4. Как открыть ссылку в новом окне (target blank)
  5. Цвета гиперссылок при наведении и переходе — как их поменять
  6. Как сделать картинку ссылкой — два способа

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поподробнее поговорить про то, что такое гиперссылка в языке Html, как можно размещать их в тексте на сайте, как сделать ссылкой картинку, как правильно использовать тег «A» и его атрибуты «Href» и «Target blank» (открыть в новом окне).

P.S. Как бы я не хотел, но всего необходимого в одну (или даже несколько публикаций) не впихнешь (а дьявол, как говорится, кроется в деталях). В общем, есть вариант пройти онлайн-обучение по теме «Как создать сайт самостоятельно от TexTerra«. Все же, за 20 часов рассказать можно, наверное, все. Но это платно, само собой.

Что такое гиперссылка и якорь (anchor)

Итак, мы с вами уже успели познакомились с устаревшими и не рекомендуемыми для повседневного использования тэгами Font, Pre и Blockquote. Продолжим дальнейшее знакомство.

Для того, чтобы сделать гиперссылку в Html коде, нам тоже понадобится использовать тег A. Для него можно будет использовать различные атрибуты, задающие, например, URL адрес цели перемещения по этой ссылке (href) или же предписывающий открывать ее в новом окне (target=_blank). Но давайте поговорим обо все по порядку.

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

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

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

Служебные гиперссылки создаются не с помощью тега „A“ (как обычные), а с помощью тега „Link“. Задач, ими выполняемых, довольно много, например, с помощью них к Html документу подключаются внешние файлы с таблицами каскадных стилей CSS или, например, подключается иконка Фавикон.

Но сегодня рассматривать то, как можно их создавать, мы не будем (до них еще дойдет время), а остановимся подробно на видимых ссылках, которые можно создать внутри области Body и, соответственно, они будут отображаться на web-странице.

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

Гиперссылки являются элементами навигации, которые призваны вас переносить на другие документы в сети, либо осуществлять перемещение по содержимому уже просматриваемой вами web-страницы с помощью заранее сделанных в теле документа меток, которые называются еще Html якорями (anchor).

Тут может возникнуть некоторая путаница, т.к. в SEO под словом „анкор“ понимают текст ссылки, но в языке Html под „anchor“ подразумевают именно якорь (перевод слова anchor) или же метку в тексте, на которую потом можно будет сослаться.

Зачем в Html используются якоря (anchor)? Это довольно удобно при создании навигации по довольно длинной web-странице. Наверное, вы встречали в сети, когда на открытой вами страничке сразу под ее заголовком приведены названия разделов статьи, опубликованной на этой странице.

Как создаются якоря и хеш ссылки

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

<a name="якорь_метка"></a>

Т.е. для того, чтобы сделать anchor, нужно в пустой тег гиперссылки „А“ прописать единственный атрибут „Name“, в качестве значения которого использовать уникальную метку, которая не должна содержать пробелов и в которой можно использовать символы латиницы, цифры, дефис и подчеркивание (в полной аналогии с правилами, по которым можно создавать Урлы — [0-9],[a-z],[A-Z],[_],[-]).

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

В этом случае не нужно создавать пустой тег „А“, а можно использовать любой из уже имеющихся в нужном месте текста элемент. Например, это могут быть теги заголовков h2-H6 или абзацев P.

Т.е. для создания аналога якоря достаточно прописать к любому тегу универсальный атрибут ID (его можно будет использовать для всех тегов, и на его основе, кстати, работают селекторы Id в CSS коде), например, так:

<h3> Текст заголовка </h3>

Так, теперь вместо создания нужного количества anchor, загрязняющих код и являвшихся на данный момент не валидными (не рекомендуемыми консорциумом W3C, который и разрабатывает язык Html), мы просто добавляет Id.

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

Оказывается, что для этого нужно будет, как обычно, внутри гиперссылки „А“ вставить обязательный атрибут „Href“, но значение которого будет формироваться из имени нужной метки (якоря) с предваряющим его знаком решетки „#“, которая еще имеет название хеш (отсюда, кстати, и растут ноги у часто используемого названия: хеш ссылки):

<a href="#якорь_метка"> перекинет на место страницы, помеченной якорем </a>

Обратите внимание, что при переходе по такой гиперссылке, открытия нового документа не произойдет. Браузер прокрутит уже открытую страницу до такого положения, чтобы место в тексте, куда вы вставили anchor, заняло позицию в самом верху экрана. Логично было бы предположить, что значения всех меток (якорей) на одной странице должно быть уникальным во избежании непоняток для браузера.

Если вы делаете якорь с помощью атрибута ID в удобно расположенном для этого теге, то нужно учитывать, что кроме ограничения по типу используемых символов ([0-9],[a-z],[A-Z],[_],[-]), значение ID обязательно должно начинаться с символа латинской буквы.

Потом могут располагаться все допустимые символы в любом количестве, но первым символом метки якоря в значении атрибута ID обязательно должна быть буква (латинская, естественно). В противном случае такой якорь, вставленный в Html код, работать не будет (в большинстве браузеров).

<a href="#"><img src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/seo.png" /></a>

Href — обязательный атрибут тега любой гиперссылки

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

<a href="путь до файла или web страницы">анкор</a>

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

Однако, напомню, при создании Урлов предпочтительнее использовать только следующие символы: ([0-9],[a-z],[A-Z],[_],[-]) и не использовать пробелы. Если мы рассматриваем содержимое атрибута Href для абсолютных ссылок, то схематично это можно будет представить так:

Если отбросить то, что вы редко будете использовать, то можно представить все то же самое в несколько упрощенном виде:

протокол(обычно http)://доменное_имя (например, ktonanovenkogo.ru)/путь_до_файла (web страницы)

Кроме простого протокола http на просторах интернета вы можете встретить ссылки с протоколом https, который отличается тем, что в нем применяется шифрование. Последний применяется на сайтах, где есть необходимость защитить канал обмена данными между сервером и браузером клиента. Например, он используется на сервисах электронных денег Веб Мани.

В интернете вы можете встретить различные варианты содержимого Href, например, такой:

https://ktonanovenkogo.ru/videokursy

Или такой (с расширением для файла):

https://ktonanovenkogo.ru/seo/kak-raskrutit-sajt.html

Сути это не меняет, а вот если в конце содержимого атрибута Href внутри гиперссылки будет стоять слэш, то это значит, что обращение идет уже не к файлу, а к папке, в которой будет искаться соответствующий индексный объект (подробнее об этом читайте в статье по url адресам упомянутой выше).

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

<a href="/wp-content/uploads/Collor.zip">Скачать что-то по ссылке</a>

Как видите, данная гиперссылка ничем не отличается от обычной, просто браузер понимает, что файл с расширение zip ему нужно именно скачать, а не пытаться открыть для просмотра, как, например, файлы документа с расширением html. Хотя, вы все это можете настроить сугубо индивидуально в своем браузере под свои личные нужды.

Создать ссылку для скачивании файла по протоколу Ftp (тут можете почитать что такое Ftp) можно по аналогии, заменив только тип протолкала в самом начале содержимого атрибута Href:

<a href="ftp://ktonanovenkogo.ru/wp-content/uploads/Collor.zip">Скачать с Ftp сервера</a>

Можно еще, например, создать гиперссылку с псевдопротоколом Mailto (почтовый), добавив в Href соответствующий Url:

<a href="mailto:[email protected]">Написать письмо</a>

Напиши мне письмецо

При переходе по такой ссылке у вас на компьютере откроется используемая вами по умолчанию почтовая программа (в браузере можно настроить, чтобы линки с mailto в Href открывались в Gmail, в почтовом сервисе Яндекса и др.) и появится диалог создания нового письма, в котором в поле «Кому» будет вставлен приведенный в Href почтовый адрес.

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

Как открыть ссылку в новом окне (target blank)

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

Лично я большой сторонник атрибута Target со значением blank, который позволяет открывать страницу в новом окне, оставляя открытой и тот документ, где была проставлена данная ссылка. Не знаю, как это влияет на юзабилити моего блога, но мне этот вариант нравится больше и я его использую практически во всех случаях.

В поисковиках мне тоже нравится настраивать открывание ссылок в новом окне, чтобы выдача всегда была под рукой и всегда можно было бы в нее вернуться. Для этих целей, как уже упомянул, в Html используется специальный атрибут Target, который по умолчанию имеет значение Self:

<a href="https://ktonanovenkogo.ru" target="_self">Откроет документ в этом же окне</a>

Хотя, конечно же, target=»_self» в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать :

<a href="https://ktonanovenkogo.ru" target="_blank">Откроется в новом окне</a>

Прописан атрибут

Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию.

Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области Head, используемого вами шаблона, прописать тег Base с атрибутом :

<head>
<base target="_blank">
что-то там еще
</head>

И теперь, если какую-то из ссылок вы захотите открывать в этом же окне, то в ее тег «A» вам уже нужно будет добавить target=»_self», ибо по умолчанию сейчас у вас теперь используется _blank. О, как.

Цвета гиперссылок при наведении и переходе — как их поменять

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

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

По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета:

  1. Синий — цвет для неотработанных ссылок, по которым пользователь еще не кликал
  2. Красный — его принимает гиперссылка сразу после щелчка по ней и до тех пор, пока запрошенный документ не будет загружен в браузер пользователя по сети (в современных условиях уловить этот момент бывает совсем не просто и всему виной повсеместно возросшая скорость интернета)
  3. Пурпурный — цвет для отработанных линков, по которым уже прошелся пользователь

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

  1. Link — задается цвет не посещенной ссылки
  2. Alink — цвет активной в данный момент, которая отрабатывается браузером
  3. Vlink — цвет уже посещенной пользователем гиперссылки

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

<body link="#0000ee" alink="#ee0000" vlink="#800080">

Как сделать картинку ссылкой — два способа

Ну, тут совсем все просто. Т.к. тег вставки картинки (img) является строчным элементом, то по большому счету любое изображение можно считать просто буквой, разве что только большего размера.

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

<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png" /></a>

В случае чистого Html вокруг картинки, которую вы сделали ссылкой, у вас появится рамочка шириной в три пикселя. Причем цвет этой рамочки будет полностью соответствовать цветам ссылок принятым для вашего сайта (о них мы говорили чуть выше по тексту).

Чтобы удалить добавление рамочки к картинке, которую вы сделали гиперссылкой, вам нужно добавить атрибут Border со значением ноль в тег Img:

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png" ></a>

Это очень простой способ сделать картинку ссылкой, но есть и более сложный вариант, называемый картой изображений. В этом случае, благодаря использованию довольно-таки большого числа Html тегов и атрибутов, можно сделать из одной картинки целую карту ссылок с активными областями (кликабельными и имеющими различные формы — прямоугольник, окружность, многоугольник).

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

href — атрибут тега a

Атрибут href тега <a> задает адрес документа, на который произойдет переход при нажатии на ссылку. Настольные Мобильные
Internet Explorer Chrome Opera Safari Firefox
1 1 1 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Правило написания атрибута href у тега a

<a href="адрес ссылки">...</a>

Адреса ссылок могут быть абсолютными или относительными. Абсолютный адрес состоит из трех частей:

  1. Протокол (http://, или https://).
  2. Доменное имя сайта. Например, site.ru.
  3. Полное имя файла целевого документа (включая папки) относительно корня сайта. Например, /analiz/seo.php.

Все вместе это выглядит так: http://site.ru/analiz/seo.php.

Разберем теперь как правильно писать относительные ссылки:

  • Относительная ссылка на целевой документ в той же папке, что и исходный документ:
    <a href="Целевой документ.html">Ссылка</a>
  • Относительная ссылка на документ в папке, которая находится на одном уровне с исходным документом:
    <a href="Папка/Целевой документ.html">Ссылка</a>
  • Относительная ссылка на документ, который находится на уровень выше исходного документа:
    <a href="../Целевой документ.html">Ссылка</a>
  • Относительная ссылка на документ, который находится в корне сайта:
    <a href="/Целевой документ.html">Ссылка</a>
Пример с тегом <a> и атрибутом href

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Атрибут href у HTML тега a</title>
</head>
<body>
  <p>
    <a href="chapter1.html">Глава 1</a>
    <a href="chapter2.html">Глава 2</a>
    <a href="chapter3.html">Глава 3</a>
    <a href="chapter4.html">Глава 4</a>
  </p>
</body>
</html>

HTML-ссылок Гиперссылки


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


HTML-ссылки — гиперссылки

HTML-ссылки являются гиперссылками.

Вы можете щелкнуть ссылку и перейти к другому документу.

Когда вы наводите указатель мыши на ссылку, стрелка мыши превращается в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любой другой элемент HTML!


HTML-ссылки — синтаксис

Тег HTML определяет гиперссылку.Он имеет следующий синтаксис:

Пример

В этом примере показано, как создать ссылку на W3Schools.com:

Посетите W3Schools.com!

Попробуй сам »

По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:

  • Непосещенная ссылка подчеркнута синим цветом
  • Посещенная ссылка подчеркнута фиолетовым цветом
  • Активная ссылка подчеркнута красным

Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы еще один взгляд!


HTML-ссылки — целевой атрибут

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

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

Атрибут цели может иметь одно из следующих значений:

  • _self — По умолчанию. Открывает документ в то же окно / вкладка, в котором было щелкнуто
  • _blank — открывает документ в новом окне или вкладке
  • _parent — открывает документ в родительском фрейме
  • _top — Открывает документ полностью в окне

Пример

Используйте target = «_ blank», чтобы открыть связанный документ в новом окне или вкладке браузера:

Посетите W3Schools!

Попробуй сам »

Абсолютные и относительные URL-адреса

В обоих приведенных выше примерах используется абсолютный URL-адрес (полный веб-адрес). в атрибуте href .

Локальная ссылка (ссылка на страницу на том же веб-сайте) указывается с относительный URL (без часть «https: // www»):

Пример

Абсолютные URL-адреса
W3C
Google

Родственник URL-адреса


HTML-изображения


CSS Учебник

Попробуй сам »

HTML-ссылки — использовать изображение как ссылку

Чтобы использовать изображение в качестве ссылки, просто поместите внутри тега tag:

Пример


Учебник HTML

Попробуй сам »

Ссылка на адрес электронной почты

Используйте mailto: внутри href , чтобы создать ссылку, открывающую программу электронной почты пользователя (чтобы пусть отправят новое письмо):


Кнопка как ссылка

Чтобы использовать кнопку HTML в качестве ссылки, необходимо добавить код JavaScript.

JavaScript позволяет указать, что происходит при определенных событиях, например, щелчком кнопки:

Пример

кнопка < > Учебное пособие по HTML

Попробуй сам »

Названия ссылок

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

Пример

Посетите наше руководство по HTML

Попробуй сам »

Подробнее об абсолютных и относительных URL-адресах

Пример

Используйте полный URL-адрес для ссылки на веб-страницу:

Учебник по HTML

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в папке html на текущем веб-сайте:

Учебник по HTML

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в той же папке, что и текущая страница:

Учебник по HTML

Попробуйте сами »


Краткое содержание главы


HTML-теги ссылок

Тег Описание
Определяет гиперссылку


HTML href Атрибут


Определение и использование

Для элементов и href Атрибут указывает URL-адрес страницы, на которую ведет ссылка.

Для элементов href Атрибут указывает базовый URL-адрес для всех относительных URL-адресов на странице.

Для элементов href Атрибут указывает расположение (URL) внешнего ресурса (чаще всего файл таблицы стилей).


Относится к

Атрибут href может использоваться для следующих элементов:


Примеры

A Пример

Атрибут href указывает место назначения ссылки:

Посетите W3Schools

Попробуй сам »

Пример площади

Карта изображений с интерактивными областями:


usemap = «# planetmap»>

<карта name = "planetmap">
Солнце
Меркурий
Venus

Попробуй сам »

Базовый пример

Укажите базовый URL-адрес для всех относительных URL-адресов на странице:



Попробуй сам »

Пример ссылки

Ссылка на внешнюю таблицу стилей:

Попробуй сам »

Поддержка браузера

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

Элемент
и Есть Есть Есть Есть Есть
площадь Есть Есть Есть Есть Есть
основание Есть Есть Есть Есть Есть
ссылка Есть Есть Есть Есть Есть


: элемент привязки — HTML: язык разметки гипертекста

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

Атрибуты этого элемента включают глобальные атрибуты.

загрузить
Предлагает пользователю сохранить связанный URL вместо перехода к нему. Может использоваться со значением или без значения:
Банкноты
href

URL-адрес, на который указывает гиперссылка. Ссылки не ограничиваются URL-адресами на основе HTTP — они могут использовать любую схему URL-адресов, поддерживаемую браузерами:

hreflang
Указывает на человеческий язык связанного URL.Нет встроенного функционала. Допустимые значения такие же, как у глобального атрибута lang .
пинг
Список URL-адресов, разделенных пробелами. При переходе по ссылке браузер отправит запросов POST с телом PING на URL-адреса. Обычно для отслеживания.
refrerpolicy
Сколько реферера отправлять при переходе по ссылке. См. Referrer-Policy для получения информации о возможных значениях и их последствиях.
отн.
Отношение связанного URL как типов ссылок, разделенных пробелами.
цель
Где отображать связанный URL, как имя контекста просмотра (вкладка, окно или