HTML тег <base>: Назначение и примеры

Тег <base> — это специальный элемент, который задает базовый URL (адрес) для всех относительных ссылок на странице.

Зачем нужен тег BASE

Обычно используют относительные пути в ссылках (например, href="base.html" или src="images/html.png"). Браузер понимает, что эти файлы лежат в той же папке, что и текущая страница или в указанном подкаталоге относительно каталога текущей страницы.

Слова папка и каталог я использую как синонимы. И хвала Аллаху!

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

Тогда такие относительные ссылки останутся рабочими даже если переместить файл в другой каталог или даже на другой сайт на другом домене.

Так же тег <base> позволяет открывать все ссылки в новом окне. Это дожно происходить если у него атрибут target="_blank".

Тег base с атрибутом href="https://almuslim.net/rus/it/html/" говорит браузеру: "Все относительные ссылки на этой странице начинаются с адреса https://almuslim.net/rus/it/html/". Это чтобы каждый раз не писать https://almuslim.net/rus/html/ , а писать положение относительно каталога html в папке it в каталоге rus на сайте almuslim.net доступного по протоколу https.

Синтаксис

Тег является одиночным (не имеет закрывающего тега) и должен находиться внутри секции <head>. На странице может быть только один тег <base>.

<base href="https://almuslim.net/rus/it/html/" target="_blank">

Атрибуты:

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

Практические примеры

Пример 1: Изменение пути для ссылок

Представьте, что у нас в <head> стоит:

<base href="https://almuslim.net/rus/it/html">

А в теле страницы мы пишем обычную короткую ссылку:

<a href="base.html">Перейти к статье про HTML</a>

Браузер автоматически склеит базовый адрес и относительную ссылку. И реальный адрес перехода будет уже на: https://almuslim.net/rus/it/html/base.html.

Результат работы на этой странице:

Нажмите сюда, чтобы перейти к статье про HTML тег BASE
(ссылка ведет на https://almuslim.net/rus/it/html/base.html, хотя в коде написано просто "base.html").

Пример 2: Открытие всех ссылок в новом окне

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

Код ссылки:

<a href="base.html">Статья про HTML тег BASE</a>

Результат: Ссылка откроется в новой вкладке, даже если вы не писали target="_blank" в самом теге <a>.

Нажми сюда (откроется в новой вкладке)

Пример 3: Влияние на картинки и формы

Тег <base> влияет не только на ссылки <a>, но и на подключение ресурсов.

Если у вас тег BASE указывает на https://almuslim.net/rus/it/html/, то код картинки:

<img src="images/html.png">

Будет искать файл по адресу https://almuslim.net/rus/it/html/images/html.png.

Замечания

Тег <base> должен быть одним из первых элементов внутри <head> (после <meta> и <title>), чтобы браузер правильно обработал все последующие ссылки.
При использовании абсолютных путей в ссылках (например, href="https://almuslim.net/fajr/ahmar.htm"), тег <base> на них не влияет.