Атрибут href тега <base>

Описание

Атрибут href в теге <base> определяет базовый URL-адрес, который используется для разрешения всех относительных URL-адресов в документе. Этот элемент должен находиться в <head> и быть указан не более одного раза на странице.

Пример использования:
<!DOCTYPE html> <html> <head> <base href="https://example.com/resources/"> </head> <body> <!-- Относительная ссылка будет разрешена в https://example.com/resources/images/photo.jpg --> <img src="images/photo.jpg" alt="Пример"> </body> </html>

Основные характеристики:

Параметр Описание Важность
Абсолютный URL Должен быть полным URL (с протоколом) ✓ Обязательно
Влияние Применяется ко всем относительным URL на странице ✓ Глобальное
Порядок Должен быть указан до других относительных URL ✓ Критично

Особенности работы:

  • Влияет на все относительные ссылки: <a>, <img>, <script>, <link>
  • Может включать путь к директории (должен заканчиваться на /)
  • Переопределяет базовый URL документа
  • Не влияет на якорные ссылки (#fragment)
Пример с путями:
<base href="https://example.com/assets/v2/"> <!-- Загрузится из https://example.com/assets/v2/images/logo.png --> <img src="images/logo.png"> <!-- Ссылка ведет на https://example.com/assets/v2/docs --> <a href="docs">Документация</a>

JavaScript взаимодействие:

// Получение базового URL const baseUrl = document.baseURI; console.log('Базовый URL:', baseUrl); // Создание абсолютного URL относительно базового const relativePath = 'api/data'; const absoluteUrl = new URL(relativePath, document.baseURI).href; console.log('Абсолютный URL:', absoluteUrl);

Лучшие практики:

  • Указывайте <base> как можно раньше в <head>
  • Используйте для SPA-приложений, развернутых в поддиректориях
  • Избегайте в обычных страницах, если не требуется
  • Тестируйте все ссылки после установки

Ограничения: Тег <base> может сломать относительные ссылки с якорями и вызвать проблемы с CSS, использующими относительные пути. Используйте с осторожностью!

Проблемный пример:

<base href="https://another-domain.com/"> <!-- Эта ссылка будет вести на https://another-domain.com/about, а не на текущий сайт --> <a href="/about">О нас</a> <!-- CSS с относительным путем сломается --> <link rel="stylesheet" href="styles/main.css">

Совет: Для современных приложений рассмотрите использование абсолютных путей или переменных окружения вместо <base>.

Примечание: В отличие от других тегов, <base> не имеет закрывающего тега и не может содержать дочерних элементов.