HTML тег <base>

HTML тег <base> задаёт единственный абсолютный (базовый) URL, который браузер использует для разрешения каждого относительного URL в документе — ссылок, изображений, таблиц стилей, скриптов и атрибутов action форм. Также он может задавать значение target по умолчанию, чтобы ссылки открывались в определённом окне или вкладке без необходимости указывать target на каждом элементе <a>.

На этой странице объясняется, что делает <base>, когда он действительно полезен, какие атрибуты он принимает, и описывается важный подводный камень, с которым большинство людей сталкивается впервые: как <base href> меняет поведение якорных ссылок на той же странице.

Зачем и когда использовать `<base>`

<base> смещает «отправную точку» для относительных путей. Без него относительный URL разрешается относительно собственного адреса документа. С ним каждый относительный URL разрешается относительно указанного вами href. Иногда это именно то, что нужно:

Ресурсы, отдаваемые с CDN. Если в разметке используются относительные пути вида img/logo.png, но реальные файлы находятся на CDN, один тег <base href="https://cdn.example.com/assets/"> перенаправляет все их на CDN без редактирования каждого пути.
Переносы сайтов и обратные прокси. Когда документ перемещён или доступен по пути, отличному от того, для которого он был создан, <base> позволяет сохранить разрешение относительных ссылок на исходное местоположение.
Генераторы статических сайтов и шаблонизаторы. Общий макет, отображаемый по множеству URL, может объявить один базовый адрес, чтобы частичные шаблоны не должны были знать, насколько глубоко они вложены.

Используйте его осторожно. Поскольку <base> влияет на каждый относительный URL на странице сразу — включая те, которые вы не писали, — это грубый инструмент. Большинство современных проектов предпочитают корректные относительные или корневые относительные пути или шаг сборки вместо глобального <base>.

Получение базового URL из JavaScript

Вы можете прочитать разрешённый базовый URL документа с помощью document.baseURI. Если в документе нет элемента <base>, значение по умолчанию равно собственному адресу документа (document.location.href).

// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"

Синтаксис

Тег <base> является пустым элементом, то есть закрывающий тег не требуется. В HTML5 самозакрывающийся слеш необязателен, но в XHTML тег <base> должен быть закрыт (<base />).

Совет

На странице может быть использован только один тег <base>, и он должен быть помещён в элемент <head>. Вставляйте его как можно раньше, поскольку его действие распространяется от места, где он указан.

Опасно

Если вы используете несколько элементов <base>, будут учтены только первые атрибуты href и target. Остальные будут проигнорированы.

Пример тега HTML `<base>`

Следующий документ задаёт оба атрибута одновременно. Базовым URL становится https://www.w3docs.com/, поэтому относительная ссылка /css3-maker/border-radius разрешается как https://www.w3docs.com/css3-maker/border-radius. А поскольку target="_blank" указан в <base>, ссылка открывается в новой вкладке, даже если на самом элементе <a> атрибут target не задан.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML base tag</title>
    <base href="https://www.w3docs.com/" target="_blank" />
  </head>
  <body>
    <a href="/css3-maker/border-radius">Try CSS Maker Tool</a>
  </body>
</html>

Отредактируйте фрагмент ниже: нажатие на ссылку открывает w3docs.com в новой вкладке — полностью благодаря тегу <base>.

«Попробуйте сами» недоступно для этого примера.

Использование только `href` (распространённый случай)

В большинстве случаев нужно только перенаправить относительные URL, не изменяя способ открытия ссылок. Задайте href и не указывайте target:

<head>
  <base href="https://cdn.example.com/assets/" />
</head>
<body>
  <!-- resolves to https://cdn.example.com/assets/img/logo.png -->
  <img src="img/logo.png" alt="Logo" />
</body>

Использование только `target`

Можно задать target по умолчанию, не изменяя базовый URL. В этом случае относительные URL по-прежнему разрешаются относительно собственного адреса документа, но каждая ссылка открывается в новой вкладке:

<head>
  <base target="_blank" />
</head>
<body>
  <!-- no target attribute, yet opens in a new tab -->
  <a href="/pricing">Pricing</a>
</body>

Внимание

Когда ссылки открываются в новой вкладке через target="_blank", добавляйте rel="noopener noreferrer" на элементы <a> в целях безопасности. <base> не может задать rel, поэтому атрибут должен присутствовать на каждой ссылке. Без noopener открытая страница может получить доступ к вашей странице через window.opener и выполнить атаку tabnabbing.

Подводный камень: `<base href>` нарушает якорные ссылки на той же странице

Это наиболее распространённый сюрприз. Ссылка-якорь вида <a href="#section"> является относительным URL — это просто фрагмент без пути. Когда присутствует <base href>, браузер разрешает этот фрагмент относительно базового URL, а не текущей страницы.

Таким образом, при наличии <base href="https://www.w3docs.com/"> щелчок по <a href="#section"> не прокручивает страницу к элементу с id="section". Вместо этого происходит переход на https://www.w3docs.com/#section — как правило, на совершенно другую страницу.

<head>
  <base href="https://www.w3docs.com/" />
</head>
<body>
  <!-- BAD: navigates to https://www.w3docs.com/#contact -->
  <a href="#contact">Contact</a>

  <!-- GOOD: stays on the current page -->
  <a href="/current-page#contact">Contact</a>

  <h2 id="contact">Contact</h2>
</body>

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

Атрибуты

Тег <base> может содержать атрибут href, атрибут target или оба сразу. Если ни один не указан, тег не имеет никакого эффекта.

Атрибут	Значение	Описание
href	абсолютный URL	Базовый URL для всех относительных URL на странице. Должен быть абсолютным URL (относительное значение ненадёжно и разрешается относительно собственного адреса документа).
target	имя контекста просмотра	Цель по умолчанию для гиперссылок и форм. Принимает четыре зарезервированных ключевых слова (см. ниже) или имя любого контекста просмотра (например, `name` iframe или именованного окна).

Зарезервированные значения атрибута target:

Значение	Описание
`_blank`	Открывает ссылку в новом окне или вкладке.
`_self`	Открывает ссылку в текущем окне (значение по умолчанию).
`_parent`	Открывает ссылку в родительском контексте просмотра.
`_top`	Открывает ссылку в верхнем (полном) контексте просмотра.

Пользовательское имя, например target="preview", направляет ссылку в контекст просмотра с таким именем — например <iframe name="preview"> — и создаёт новое окно, если контекст с таким именем не существует.

Предостережения и взаимодействие

<link rel="canonical">. Канонический URL следует записывать как абсолютный. Не полагайтесь на <base> для преобразования относительного <link rel="canonical" href="..."> в правильный адрес — делайте значение канонического URL абсолютным самостоятельно. Смотрите <link>.
<form action="">. Атрибут action формы также разрешается относительно базового URL. Пустой action="" обычно отправляет данные на текущую страницу; при наличии <base href> отправка происходит на базовый URL, что редко является намеренным.
Важно место размещения. <base> влияет только на URL, которые появляются после него в исходном коде. Помещайте его в самом начале <head>, перед любыми элементами <link>, <script> или другими элементами, содержащими URL.

Связанные разделы

Практика

Что делает HTML тег base?

Задаёт базовый URL для всех относительных URL, а также цель по умолчанию для гиперссылок и форм в документе.Используется для встраивания мультимедиа в веб-страницу.Определяет набор навигационных ссылок.Только открывает ссылки в новом окне и не может изменять относительные URL.Добавляет заголовок к веб-документу.

Зачем и когда использовать <base>