Тег <base> в HTML: что это такое?

Дата последнего обновления статьи: 2025-01-01

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<base>

Это изображениелицензировано подCC BY 4.0

Тег <base> в HTML используется для указания базового URL для всех относительных ссылок на странице. В этом элементе также можно указать в какой вкладке будут открываться ссылки по умолчанию.

Этот тег должен располагаться в секции <head> документа и может содержать только атрибуты href и target.

Синтаксис тега base

<base href="https://example.com/" target="_blank">

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

href - базовый URL для всех относительных ссылок в документе.
target - цель по умолчанию для всех ссылок в документе (_self, _blank, _parent, _top).

Так же поддерживает глобальные атрибуты.

Примеры использования тега base

Базовый URL для ресурсов

<head>
  <base href="https://example.com/images">
  <!-- Теперь этот путь будет разрешен как https://example.com/images/logo.png -->
  <img src="/logo.png" alt="Логотип">
</head>

Цель для ссылок по умолчанию

<head>
  <base href="https://example.com" target="_blank">
  <!-- Все ссылки будут открываться в новой вкладке -->
  <link rel="stylesheet" href="/styles/main.css">
  <a href="/about">О нас</a>
</head>

Советы по использованию

Размещайте тег base в начале секции head, перед любыми элементами, которые используют относительные URL.
Используйте только один тег base на странице, следующие теги base будут игнорироваться.
Указывайте полный URL в атрибуте href, его можно извлечь с помощью Node.baseURI. Если не указан, то по умолчанию будет использовано значение location.href.
Помните, что base влияет на все относительные URL в документе, включая якорные ссылки. Переход по якорным ссылкам будет происходить относительно базового URL. Например, если на странице https://example.com/page.html есть базовый URL, и указана якорная ссылка #about, то переход по этой ссылке будет происходить по адресу https://example.com/#about, а не https://example.com/page.html#about.
Тестируйте работу относительных ссылок после добавления base.
Учитывайте влияние target на все ссылки страницы.
Теги OpenGraph не учитывают base и должны содержать абсолютные адреса. Например, <meta property="og:image" content="https://example.com/image.jpg" />.

Часто задаваемые вопросы (FAQ)

1 Можно ли использовать несколько тегов base на странице?

Нет, на странице может быть только один тег base. Если указано несколько, будет использован только первый.

2 Где должен располагаться тег base?

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

3 Что произойдет, если не указать атрибут href или target?

Если не указан href, относительные URL будут разрешаться относительно текущего документа. Если не указан target, ссылки будут открываться в текущем окне.

Заключение

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

Для получения дополнительной информации о теге base, рекомендуем ознакомиться с официальной документацией на сайте MDN.

Предыдущая страница

Следующая страница