Тег <base> задаёт базовый адрес, от которого браузер считает все относительные ссылки и пути на странице - в <link>, <script>, картинках, формах и обычных ссылках. Прописывается только внутри <head>, и на странице его может быть только один.
В этой статье
<base href="https://example.com/docs/" target="_blank">href и target - что меняет base
У <base> всего два атрибута, и должен быть указан хотя бы один из них. href задаёт сам базовый адрес - все относительные ссылки на странице (без домена, вроде page.html или images/pic.jpg) браузер достраивает уже от него, а не от адреса текущей страницы. target задаёт значение по умолчанию для ссылок и форм, у которых атрибут target не указан явно - например, target="_blank" заставит все такие ссылки открываться в новой вкладке разом, без правки каждой по отдельности.
Пример: один и тот же href с base и без него
<head>
<base href="https://example.com/docs/">
</head>
<body>
<a href="page.html">ссылка</a>
</body>Переключите чекбокс - ниже настоящий результат: браузер сам вычисляет полный адрес именно этой ссылки внутри отдельного документа через встроенное свойство href у самого элемента, а не строка, собранная вручную:
В документе есть ссылка: <a href="page.html">
Реальный адрес, на который она ведёт:
Без <base> относительный page.html достраивается от адреса самого документа - как у любой обычной ссылки. С <base href="https://example.com/docs/"> результат резко меняется на https://example.com/docs/page.html, хотя текст ссылки в HTML не тронут вообще - изменился только базовый адрес, от которого браузер её считает.
Где это реально применяют
На обычном сайте с одним доменом и без переездов <base>, как правило, просто не нужен - относительные пути и так корректно строятся от адреса самой страницы. Но есть конкретные ситуации, где он реально решает проблему, а не просто теоретическая возможность:
<base href="/imya-repozitoriya/">Самый частый реальный кейс - проектный сайт на GitHub Pages, который открывается не с корня домена, а из подпапки вида login.github.io/imya-repozitoriya/. Абсолютные пути вроде /style.css в такой подпапке ведут мимо цели - браузер ищет файл от корня всего домена, а не от папки проекта. Одна строка <base href="/imya-repozitoriya/"> в head чинит сразу все такие ссылки, без правки каждого файла по отдельности. Похожая логика работает и при переезде сайта на новый домен или в новую структуру папок, а также в CMS и веб-приложениях, у которых часть файлов физически хранится в другом месте (например, на отдельном сервере статики) - вместо переписывания каждого пути вручную меняется одна строка в head.
Только один на странице и обязательно раньше других тегов
Спецификация разрешает только один <base> на документ. Если по ошибке в код попало несколько - браузер не суммирует и не выдаёт ошибку, а просто берёт href из первого найденного тега и target тоже из первого найденного (они могут оказаться в разных тегах <base>), а остальные полностью игнорирует. Важен и порядок: <base> должен стоять раньше любых других тегов в head, которые сами используют относительные адреса - <link>, <script> и подобные. Если он окажется ниже них, эти теги браузер успеет обработать по старому базовому адресу, до того как встретит <base>.
Где base не работает: OG-теги, безопасность
<base> действует не везде. Теги Open Graph для соцсетей (og:image, og:url и подобные) его полностью игнорируют - туда всегда нужно писать полный адрес с доменом, иначе превью в соцсети банально не найдёт картинку. В href запрещены адреса вида javascript: и data: - браузер просто отклонит такое значение. А у target есть отдельная защита от подмены разметки: если в значении атрибута встречается перенос строки, таб или символ <, браузер сбрасывает его до _blank, что бы ни было написано автором.
Что может быть не так с тегом base
С base редко ошибаются в самом синтаксисе - чаще спотыкаются об его побочные эффекты на остальные теги страницы:
| Ошибка | Что происходит | Как исправить |
|---|---|---|
В href нет завершающего слэша: https://example.com вместо https://example.com/ | Браузер считает последнюю часть адреса файлом, а не папкой, и относительные пути достраиваются с ошибкой - вплоть до слипания с доменом | Всегда заканчивать базовый адрес слэшем, если это папка, а не конкретный файл |
<base> стоит в head после <link> или <script> | Эти теги браузер уже обработал по старому базовому адресу - смена base их задним числом не затрагивает | Ставить <base> самой первой строкой в head, до любых тегов с адресами |
Несколько тегов <base> в надежде задать и href, и target раздельно | Работает только первый найденный href и только первый найденный target, даже если они в разных тегах - остальное браузер отбрасывает молча | Один тег <base> с обоими нужными атрибутами сразу |
| Расчёт на base для картинок Open Graph и других meta-адресов | Соцсети и мессенджеры читают og:image/og:url напрямую, base на них не действует - превью может остаться пустым | В meta-тегах Open Graph всегда писать полный адрес с доменом |
