Тег base в HTML - полный разбор и практические примеры

05 января 2026

Автор

Олег Марков

Введение

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

Смотрите, я покажу вам, как это работает. Обычно браузер воспринимает относительные ссылки, отталкиваясь от адреса самой HTML‑страницы. Но если вы объявляете тег base, то указываете браузеру другую отправную точку. Это удобно при работе с шаблонами, статическими генераторами, при размещении сайта в подкаталогах и в более сложных сценариях.

В этой статье мы подробно разберем:

синтаксис и атрибуты base
как он влияет на ссылки, изображения, скрипты, стили
типичные сценарии применения
подводные камни и проблемы, с которыми вы можете столкнуться
рекомендации по использованию в современных проектах

В конце вы найдете блок с короткими ответами на технические вопросы, которые часто возникают у разработчиков, когда они начинают использовать тег base.

Что такое тег base и где он располагается

Тег base — это одиночный тег, который разрешено использовать только внутри head и только один раз на страницу.

Простейший пример:

<head>
  <meta charset="UTF-8">
  <!-- Здесь мы задаем базовый URL для всех относительных путей -->
  <base href="https://example.com/blog/">
  <title>Страница блога</title>
</head>
<body>
  <!-- Относительная ссылка интерпретируется относительно base.href -->
  <a href="post-1.html">Первый пост</a>
</body>

Комментарии в примере показывают ключевую идею: браузер теперь будет воспринимать относительный путь post-1.html не относительно URL текущей страницы, а относительно https://example.com/blog/.

Ограничения по расположению

Обратите внимание на важные правила спецификации:

тег base разрешен только внутри секции head
тег base должен находиться до любых тегов, где используются относительные URL (link, script, a и т.д.)
использовать можно только один тег base на документ

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

Атрибуты тега base

У тега base всего два атрибута:

href — базовый URL для всех относительных путей
target — целевое окно или фрейм по умолчанию

Давайте разберемся с каждым отдельно.

Атрибут href

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

Пример:

<head>
  <!-- Базовый URL для страницы -->
  <base href="https://example.com/app/">
</head>
<body>
  <!-- Смотрите, что произойдет с этой ссылкой -->
  <a href="profile">Профиль</a>
  <!-- Браузер воспримет href как https://example.com/app/profile -->
</body>

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

Какие URL считаются относительными

Для понимания важно различать:

относительные пути к файлу (например style.css, images/logo.png)
абсолютные URL (например https://site.com/page, //cdn.site.com/script.js)

Тег base влияет только на относительные URL. Абсолютные адреса всегда остаются как есть, без подстановки base.href.

Давайте посмотрим на более полный пример:

<head>
  <!-- Базовый URL страницы -->
  <base href="https://example.com/site/">
</head>
<body>
  <!-- относительный путь - применится base -->
  <a href="page.html">Ссылка 1</a>
  <!-- итоговый URL - https://example.com/site/page.html -->

  <!-- абсолютный URL - base не влияет -->
  <a href="https://google.com">Google</a>
  <!-- итоговый URL - https://google.com -->

  <!-- протокол независимый URL - base не влияет -->
  <script src="//cdn.example.com/lib.js"></script>
  <!-- итоговый URL - //cdn.example.com/lib.js -->
</body>

Комментарии поясняют, какие адреса изменяются, а какие остаются без влияния base.

Что происходит, если не указать href

Если у тега base отсутствует атрибут href, то базовым URL остается адрес текущего документа. Например:

<head>
  <!-- base без href влияет только на target (если он указан) -->
  <base target="_blank">
</head>

В таком случае base задает только поведение target для ссылок, а система расчета относительных путей не меняется.

Атрибут target

Атрибут target задает целевое окно или вкладку для всех ссылок и форм по умолчанию. То есть он работает примерно как атрибут target у тега a, но глобально для страницы.

Поддерживаются те же значения, что и у ссылки:

_self — открыть в текущем окне (значение по умолчанию, если ничего не указано)
_blank — открыть в новой вкладке или окне
_parent — открыть в родительском фрейме
_top — открыть в самом верхнем фрейме, выходя из вложенности
имя фрейма или окна — открыть в конкретном окне/фрейме с этим именем

Посмотрите пример:

<head>
  <!-- Все ссылки по умолчанию будут открываться в новой вкладке -->
  <base target="_blank">
</head>
<body>
  <!-- Эта ссылка откроется в новой вкладке из-за base -->
  <a href="page1.html">Страница 1</a>

  <!-- А здесь мы переопределяем поведение локально -->
  <a href="page2.html" target="_self">Страница 2</a>
  <!-- Эта ссылка все же откроется в текущей вкладке -->
</body>

Комментарии показывают, как приоритетно срабатывает target, указанный в самой ссылке, поверх значения из base.

Комбинирование href и target

Вы можете использовать оба атрибута одновременно:

<head>
  <!-- Базовый URL и способ открытия ссылок по умолчанию -->
  <base href="https://example.com/docs/" target="_blank">
</head>
<body>
  <!-- Откроется https://example.com/docs/guide.html в новой вкладке -->
  <a href="guide.html">Гид по продукту</a>
</body>

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

Как base влияет на разные типы ресурсов

Тег base влияет не только на ссылки в тегах a. Он затрагивает большинство HTML элементов, в которых используются относительные URL.

Давайте разберемся, на что именно влияет base.

Ссылки и формы

Наиболее очевидное влияние — на элементы:

a (атрибут href)
area (атрибут href для областей карты изображений)
form (атрибут action)

Пример:

<head>
  <!-- Базовый адрес приложения -->
  <base href="https://example.com/app/">
</head>
<body>
  <!-- Ссылка уйдет на https://example.com/app/dashboard -->
  <a href="dashboard">Панель управления</a>

  <!-- Форма отправится на https://example.com/app/api/login -->
  <form action="api/login" method="post">
    <!-- Здесь будут поля формы -->
    <button type="submit">Войти</button>
  </form>
</body>

Комментарии поясняют, как меняются конечные адреса.

Ресурсы оформления и скрипты

Если вы подключаете CSS и JavaScript с помощью относительных путей, на них тоже распространяется действие base:

link rel="stylesheet" (атрибут href)
script (атрибут src)
img (атрибут src)
source (в видео/аудио)
iframe (атрибут src)
и другие элементы, где есть URL

Посмотрите пример:

<head>
  <!-- Базовый путь ко всем ресурсам -->
  <base href="https://static.example.com/assets/">

  <!-- Стили будут загружены с https://static.example.com/assets/css/main.css -->
  <link rel="stylesheet" href="css/main.css">

  <!-- Скрипт загрузится с https://static.example.com/assets/js/app.js -->
  <script src="js/app.js"></script>
</head>
<body>
  <!-- Картинка возьмется с https://static.example.com/assets/images/logo.png -->
  <img src="images/logo.png" alt="Логотип">
</body>

Комментарии показывают конечные адреса каждого ресурса.

Относительные ссылки внутри CSS и JS

Здесь важный момент, который часто вызывает вопросы. Тег base не влияет на относительные URL внутри CSS и JavaScript файлов.

Смотрите, как это работает:

относительные пути внутри CSS (например в url(...) — шрифты, изображения) считаются относительно местоположения самого CSS файла
относительные пути внутри JavaScript (например при AJAX запросах или динамическом создании элементов) зависят от того, какой URL вы используете в коде, и от контекста браузера

Тег base действует только на сам HTML документ. Внешние ресурсы интерпретируют свои относительные пути по своим правилам.

Пример, иллюстрирующий это:

<head>
  <!-- Базовый URL для HTML -->
  <base href="https://example.com/site/">

  <!-- Стили подключаются с https://example.com/site/css/main.css -->
  <link rel="stylesheet" href="css/main.css">
</head>

А теперь представьте содержимое файла css/main.css:

/* Здесь мы подключаем фон для блока */
.block {
  background-image: url("../images/bg.png");
  /* Относительный путь считается от /site/css/ */
  /* Итоговый URL - https://example.com/site/images/bg.png */
}

Комментарии в CSS поясняют, что base не пересчитывает внутренние относительные пути. Они по‑прежнему привязаны к расположению самого CSS файла.

Типичные сценарии использования base

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

Размещение сайта в подкаталоге

Представьте, что сайт изначально разрабатывался с ожиданием, что он будет жить в корне домена (https://example.com/). Но по факту его разместили в подкаталоге (https://example.com/project/).

Вы могли изначально писать пути так:

<a href="/about">О нас</a>
<img src="/images/logo.png" alt="Логотип">

Но если корень сайта сместился в /project, эти пути уже указывают не туда. Один из вариантов решения — использовать base.

Вы можете задать базовый URL:

<head>
  <!-- Сайт находится в подкаталоге project -->
  <base href="https://example.com/project/">
</head>
<body>
  <!-- Смотрите, как теперь будет считаться путь -->
  <a href="about">О нас</a>
  <!-- Итоговый URL - https://example.com/project/about -->

  <img src="images/logo.png" alt="Логотип">
  <!-- Итоговый URL - https://example.com/project/images/logo.png -->
</body>

При таком подходе все относительные пути автоматически "приклеиваются" к https://example.com/project/.

Шаблоны и статические генераторы

Если вы используете шаблонизатор или статический генератор (Hugo, Jekyll, и т.п.), иногда удобно задать base в шаблоне, чтобы все подпроекты корректно работали независимо от места размещения.

Например, общий шаблон может содержать:

<head>
  <!-- Здесь может подставляться корень сайта, переданный генератором -->
  <base href="{{ .Site.BaseURL }}">
</head>

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

Приложения с несколькими точками входа

Иногда у вас на одном домене живет несколько независимых приложений в разных папках:

/admin/ — панель администратора
/app/ — клиентская часть
/docs/ — документация

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

Пример для панели администратора:

<head>
  <!-- Панель администратора живет в /admin/ -->
  <base href="https://example.com/admin/">
</head>
<body>
  <!-- Откроет https://example.com/admin/users -->
  <a href="users">Список пользователей</a>
</body>

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

Подводные камни и проблемы при использовании base

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

Ломаются относительные ссылки и ресурсы

Одна из частых ситуаций: кто‑то добавляет base в шаблон, а потом часть ресурсов перестает грузиться. Обычно это происходит, когда:

кто‑то рассчитывал на относительные пути от реального расположения страницы
добавленный baseHref указывает на другой каталог
некоторые пути становятся "двойными" или указывают на несуществующие файлы

Пример:

<head>
  <!-- Кто-то решил указать базовый URL на корень сайта -->
  <base href="https://example.com/">
</head>
<body>
  <!-- Страница физически находится по адресу https://example.com/app/page.html -->
  <!-- Путь в img расчитан относительно /app/ -->
  <img src="images/photo.jpg" alt="Фото">
  <!-- Ожидаемый путь - https://example.com/app/images/photo.jpg -->
  <!-- Фактический с base - https://example.com/images/photo.jpg (и картинка может не найтись) -->
</body>

Комментарии демонстрируют расхождение ожиданий и реального поведения.

Чтобы избежать подобных ситуаций:

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

Влияние на ссылки в JavaScript

Если вы в JavaScript динамически создаете ссылки или отправляете запросы по относительным адресам, они тоже будут интерпретироваться с учетом base.

Например:

<head>
  <!-- Базовый URL для HTML -->
  <base href="https://example.com/api/">
</head>
<body>
  <script>
    // Здесь мы создаем ссылку динамически
    const link = document.createElement("a");
    link.href = "users"; // относительный путь
    // Браузер сформирует из него https://example.com/api/users
    document.body.appendChild(link);

    // Теперь пример с fetch
    // Запрос уйдет на https://example.com/api/data
    fetch("data")
      .then(response => response.json())
      .then(json => {
        // Здесь мы работаем с данными
        console.log(json);
      });
  </script>
</body>

Комментарии показывают, что относительные пути внутри JS также учитывают base документа.

Если ваш JavaScript изначально писался с учетом другого базового пути, добавление base может неожиданно изменить адреса запросов. В таких случаях:

используйте абсолютные URL в критичных местах
или явно формируйте URL, не полагаясь на base документа

Проблемы с навигацией в одностраничных приложениях (SPA)

Современные SPA‑приложения часто используют <base href="/"> в сочетании с HTML5 History API или Router‑модулями (например в Angular, Vue Router с history‑режимом).

Схема обычно такая:

<head>
  <!-- У многих SPA вы увидите такой base -->
  <base href="/">
</head>

Маршрутизатор внутри приложения берет на себя разбор путей, а сервер почти всегда отдает один и тот же HTML файл.

Проблемы возникают, когда:

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

В результате:

ссылки могут вести на неправильные адреса
обновление страницы по адресу /project/dashboard приводит к 404 от сервера

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

всегда синхронизируйте значение base href и настройки маршрутизатора SPA
если приложение живет в подкаталоге, указывайте это в base (<base href="/project/">)
убедитесь, что сервер настроен отдавать HTML файл на все маршруты вашего SPA

Несовместимость с некоторыми библиотеками и плагинами

Некоторые сторонние библиотеки (особенно старые или написанные без учета base) могут:

"жестко" формировать относительные пути, ожидая, что базовый URL — это путь документа
использовать location.pathname и относительные ссылки, не учитывая возможный base

В таких случаях:

изучите документацию библиотеки — иногда там есть прямое указание не использовать base
при необходимости откажитесь от base и переходите на явные абсолютные пути в HTML и JS

Заключение

Тег base в HTML — мощный инструмент для управления базовым URL и целевым окном по умолчанию. Он позволяет:

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

В то же время base легко может стать источником ошибок:

ломаются относительные пути, завязанные на фактический путь к документу
меняются адреса запросов внутри JavaScript
возникают сложности с маршрутизацией SPA и конфигурацией сервера

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

Частозадаваемые технические вопросы по тегу base

1. Можно ли динамически менять тег base через JavaScript

Да, вы можете изменять или добавлять тег base через DOM API.

Мини‑инструкция:

// Ищем существующий тег base
let base = document.querySelector("base");

// Если его нет - создаем новый
if (!base) {
  base = document.createElement("base");
  document.head.prepend(base); // Добавляем в начало head
}

// Задаем новый базовый URL
base.href = "https://example.com/new-base/";
// Теперь все относительные ссылки будут считаться относительно этого адреса

После изменения base браузер начнет интерпретировать новые относительные URL относительно нового значения. Уже сгенерированные абсолютные ссылки не изменятся.

2. Как получить реальный абсолютный URL из относительного с учетом base

Используйте конструктор URL, он учитывает текущий документ и тег base.

// Здесь относительный путь
const relative = "images/photo.png";

// Создаем объект URL на основе относительного пути и базового документа
const absoluteUrl = new URL(relative, document.baseURI).href;

// Теперь absoluteUrl содержит полный URL с учетом base
console.log(absoluteUrl);

Свойство document.baseURI уже учитывает тег base, если он есть.

3. Чем base отличается от meta viewport baseurl или подобных кастомных мета‑тегов

Тег base — это стандартный HTML элемент, который влияет на поведение браузера при разрешении относительных URL.
Мета‑теги с кастомными именами (например meta name="baseurl") сами по себе ничего не меняют. Они могут использоваться только вашим JavaScript или сторонними инструментами, которые вы специально настроите читать эти мета‑данные. Браузер их не интерпретирует как базовый URL.

4. Можно ли задать разный base для разных частей страницы

Нет. По спецификации на документ должен приходиться только один тег base. Он действует на весь HTML документ целиком.
Если вам нужно по‑разному трактовать пути в отдельных частях интерфейса, делайте это программно — формируйте URL в JS сами, без опоры на base, или используйте разные абсолютные адреса.

5. Как корректно отключить влияние base только для одного ресурса

Полностью "отключить" base для отдельного элемента нельзя, но вы можете использовать:

абсолютный URL (например https://example.com/path)
или корневой путь, начинающийся с /

Мини‑пример:

<head>
  <base href="https://example.com/app/">
</head>
<body>
  <!-- Эта ссылка учитывает base -->
  <a href="profile">Профиль</a>
  <!-- Итог - https://example.com/app/profile -->

  <!-- А эта ссылка игнорирует base, так как начинается с / -->
  <a href="/help">Помощь</a>
  <!-- Итог - https://example.com/help -->
</body>