<base>

Удобный способ определить домашний адрес для всех ссылок на сайте.

Время чтения: меньше 5 мин

Кратко

Скопировано

Тег <base> определяет основной адрес, который будет подставляться в начало всех относительных путей внутри документа. Пишется внутри тега <head>.

На странице должен быть только один <base>. Если их несколько, то применится только первый.

Пример

Скопировано
        
          
          <head>  <title>Дока</title>  <base href="https://ex.amp" target="_self"></head>
          <head>
  <title>Дока</title>
  <base href="https://ex.amp" target="_self">
</head>

        
        
          
        
      

Как пишется

Скопировано

Тег <base> нужно написать как можно выше к началу разметки, максимально близко к открывающему тегу <head>. Чтобы все идущие ниже относительные ссылки правильно читались.

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

Атрибут href

Скопировано

Значение атрибута определяет нужный основной адрес.

Атрибут target

Скопировано

Определяет, как на всём сайте будут открываться ссылки и формы:

  • _self — на текущей странице (значение по умолчанию);
  • _blank — в новой вкладке;
  • _parent — в родительском окне;
  • _top — в контексте верхнего уровня.

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

Как понять

Скопировано

При создании относительных ссылок косая черта / в начале указывает, что адрес нужно строить от корневого каталога. Например, ссылка /new-page.html будет вести на страницу https://ex.amp/new-page.html.

Если же в начале относительной ссылки нет слэша, то адрес будет строиться относительно текущего каталога. Предположим, что мы находимся в каталоге about, тогда ссылка new-page.html будет вести на страницу https://ex.amp/about/new-page.html.

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

В коде ниже ссылка «архив» будет вести на страницу https://ex.amp/news/archive.html:

        
          
          <head>    <title>Новости Доки</title>    <base href="https://ex.amp/news/index.html"></head><body>    <p>Посетить <a href="archive.html">архив</a>.</p></body>
          <head>
    <title>Новости Доки</title>
    <base href="https://ex.amp/news/index.html">
</head>
<body>
    <p>Посетить <a href="archive.html">архив</a>.</p>
</body>