HTML-тег <base>

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

При использовании тега <base> все относительные ссылки(например, изображения, файлы CSS или гиперссылки) в документе будут разрешаться относительно указанного базового URL-адреса, если только они не являются абсолютными URL-адресами.

Атрибуты HTML-тега <base>

  • href: Указывает базовый URL-адрес для всех относительных URL-адресов в документе.
  • Цель: определяет цель по умолчанию для гиперссылок. Возможные значения: <ul class="wp-block-list">
  • _self : открывает ссылку в том же окне или вкладке(по умолчанию).
  • _blank : Открывает ссылку в новом окне или вкладке.
  • _parent : Открывает ссылку в родительском фрейме.
  • _top : Открывает ссылку во всем теле окна.

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

Вот простой пример, демонстрирующий использование тега <base> : 

<!DOCTYPE html>
<html>
    <head>
        <base href="https://example.com/" target="_blank">
        <title>Base Tag Example</title>
    </head>
    <body>
        <h2>Base Tag Example</h2>
        <p>Here are some links:</p>
        <a href="page1.html">Page 1</a>

        <a href="page2.html">Page 2</a>
    </body>
</html>
Пример HTML-базы Тег

Пояснение: В этом примере все относительные URL-адреса(например, page1.html и page2.html ) разрешаются на основе базового URL-адреса https://example.com/ . Кроме того, все ссылки открываются в новой вкладке благодаря атрибуту target="_blank" .

Особые случаи для HTML-тега <base>

Использование <base> с изображениями

Тег <base> также может влиять на пути к изображениям: 

<!DOCTYPE html>
<html>
    <head>
        <base href="https://example.com/assets/">
    </head>
    <body>
        <h2>Images with Base Tag</h2>
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
    </body>
</html>

Пояснение: Изображения image1.jpg и image2.jpg загружаются из каталога https://example.com/assets/ из-за базового URL, указанного в теге <base> .

Обработка нескольких тегов <base>

Используется только первый тег <base> в документе. Любые дополнительные теги <base> игнорируются.

Пример: 

<!DOCTYPE html>
<html>
    <head>
        <base href="https://example1.com/">
        <base href="https://example2.com/"> 
    </head>
    <body>
        <a href="page.html">Visit Page</a>
    </body>
</html>

Результат: ссылка page.html преобразуется в https://example1.com/page.html .

Объединение <base> с абсолютными URL-адресами

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

Пример: 

<!DOCTYPE html>
<html>
    <head>
        <base href="https://example.com/">
    </head>
    <body>
        <a href="https://absolute.com/page.html">Visit Absolute Page</a>
    </body>
</html>

Результат: ссылка преобразуется в https://absolute.com/page.html , а не https://example.com/https://absolute.com/page.html .