Атрибут href задаёт адрес, на который ведёт элемент - страницу, файл, якорь или базовый адрес для всей страницы. Это не глобальный атрибут: он работает только у четырёх тегов, а не у любого элемента подряд.
<a href="/price.html">Цены</a>В этой статье
Атрибут href в HTML: на каких тегах работает
href встречается всего у четырёх тегов, и в каждом означает немного своё:
| Тег | Что задаёт href | Пример |
|---|---|---|
<a> | Адрес, на который ведёт ссылка | <a href="/price.html">Цены</a> |
<area> | Адрес для кликабельной области на картинке-карте | <area shape="circle" coords="80,75,50" href="/a"> |
<base> | Базовый адрес, от которого считаются все относительные ссылки страницы | <base href="https://example.com/docs/"> |
<link> | Адрес подключаемого файла, чаще всего стилей | <link rel="stylesheet" href="style.css"> |
У <img>, <script> и <meta> атрибута href нет вообще - это частая путаница: картинку и скрипт подключают через src, а meta использует свои атрибуты. Подробно про href в ссылке - заглушка без href, href="#", якоря, протоколы mailto: и tel: - уже разобрано в статье про тег a, здесь эти темы не повторяю.
href и src: в чём разница
href и src путают регулярно, но у них разная задача: href (hyperlink reference) только указывает на ресурс, не встраивая его на страницу - элемент остаётся самим собой, а переход или подключение происходит отдельно. src (source) загружает ресурс и встраивает его прямо в это место документа - без него <img> или <script> просто не будут работать. Поэтому <link rel="stylesheet" src="style.css"> не подключит стили - у <link> именно href, а не src.
| Атрибут | Смысл | Где встречается |
|---|---|---|
| href | Ссылается на ресурс, не встраивает его | <a>, <area>, <base>, <link> |
| src | Загружает ресурс и встраивает его в элемент | <img>, <script>, <iframe>, <audio>, <video> |
href как атрибут и как свойство JavaScript
У href, как и у многих атрибутов, есть два разных способа обращения из JavaScript, и они отдают разные значения. element.href - это IDL-свойство: оно всегда возвращает развёрнутый абсолютный адрес, даже если в HTML написан относительный путь. element.getAttribute('href') отдаёт ровно ту строку, что написана в разметке, без всякого резолвинга. Запись тоже асимметрична: element.href = 'novaya.html' кладёт в атрибут именно эту строку как есть - resolve в абсолютный адрес происходит только при следующем чтении .href, а не в момент записи.
Пример: .href и getAttribute на одной ссылке, до и после записи
.href всегда абсолютный, getAttribute('href') - как написано в HTML; это верно и до, и после записи нового значения.
base href: базовый адрес для всех относительных ссылок
Тег <base href="..."> задаёт базовый адрес, от которого браузер резолвит все относительные ссылки и подключения ресурсов на странице - не только href у ссылок, но и src у картинок, скриптов и прочего. На странице допустим только один <base>, и прописывать его нужно как можно раньше в <head>, до любых относительных адресов.
Пример: один и тот же href резолвится по-разному с base и без
base ничего не меняет в разметке ссылки - меняется только то, во что резолвится относительный href при чтении .href.
href на area: кликабельные зоны в image map
У тега <area> href работает не на прямоугольном элементе, а на произвольной области картинки-карты (image map): форму области задают shape (circle, rect, poly) и coords, а куда она ведёт - обычный href, прямо как у ссылки. Картинка и карта связываются через usemap у <img> и name у <map>.
<img src="plan.png" usemap="#zones" alt="План">
<map name="zones">
<area shape="circle" coords="80,75,50" href="/krug">
<area shape="rect" coords="180,25,280,125" href="/kvadrat">
</map>Пример: клик по круглой и прямоугольной области
У каждой area свой href - клик по области срабатывает так же, как клик по обычной ссылке, просто форма области не прямоугольник тега.
Частые ошибки с атрибутом href
Ошибки с href обычно не в значении атрибута, а в выборе тега или способа его прочитать.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Пишут href у <img> или <script> | У этих тегов href не существует - подключение идёт через src | Использовать src для img, script, iframe, audio, video |
| Путают href и src у <link> | У link именно href, src там не работает вообще | Для link всегда href: <link rel="stylesheet" href="style.css"> |
| Ждут от getAttribute('href') абсолютный адрес | getAttribute отдаёт строку как в HTML, без резолвинга | За абсолютным адресом обращаться к element.href |
| Прописывают несколько <base> на странице | Спецификация разрешает только один base, лишние браузер игнорирует | Оставлять один base и прописывать его в начале head |
| Считают area с href обычным прямоугольным элементом | Форму области задают shape и coords, а не размеры тега | Проверять клик именно по форме области, а не по прямоугольнику вокруг неё |
| Оставляют href="" пустым | Пустой href резолвится в адрес самой страницы - ссылка просто перезагружает её | Если ссылка никуда не ведёт, убирать href совсем или прописывать href="#" |
| Пишут href="javascript:..." вместо обработчика | javascript: в href работает, но это устаревший и небезопасный приём | Навешивать клик через addEventListener, а href оставлять обычным адресом |
Шпаргалка по атрибуту href
| Правило | Что запомнить |
|---|---|
| Где работает | Только a, area, base, link - не глобальный атрибут |
| У img/script/meta | href нет, там свои атрибуты (src и другие) |
| href vs src | href ссылается на ресурс, src встраивает его в элемент |
| element.href | Всегда развёрнутый абсолютный адрес |
| element.getAttribute('href') | Строка ровно как в HTML, без резолвинга |
| Запись .href | Кладёт в атрибут строку как есть, resolve - только при следующем чтении |
| base href | Базовый адрес для всех относительных ссылок и ресурсов страницы, один на документ |
| area href | Адрес для кликабельной области image map, форма - через shape и coords |
