Элемент base



Влад Мержевич

Элемент <base> не выводит никакого контента и выполняет исключительно служебную функцию — позволяет указать базовый URL, относительно которого будут устанавливаться другие адреса, например, для изображений и ссылок. Также <base> задаёт значение атрибута target, которое по умолчанию применяется ко всем ссылкам.

В документе разрешается иметь только один <base>.

Атрибут href

Предположим, все изображения для наших документов хранятся в папке assets/images. Чтобы постоянно не указывать этот путь перед именем файла, его можно вынести в значение атрибута href тега <base>, как показано в примере 1.

Пример 1. Использование href

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Адрес изображения</title>
  <base href="/example/images/">
 </head>
 <body> 
  <p><img src="figure.jpg" alt=""></p>
 </body>
</html>

Хотя в данном примере путь к файлу задан как figure.jpg в действительности его надо понимать как /example/images/figure.jpg. Обратите внимание на последний слэш (/), если его не указать, то путь к файлу будет /example/imagesfigure.jpg, что приведёт к ошибке и рисунок выводиться не будет.

В данном случае атрибут href будет действовать на все адреса, используемые в документе, включая ссылки, поэтому на них путь, заданный в <base> также будет распространяться. Если в пример 1 добавить ссылку <a href="link.html">ссылка</a>, то браузер будет искать документ по адресу /example/images/link.html.

Из-за того, что <base> влияет на все используемые ниже него адреса, его рекомендуется ставить в <head> раньше элементов со ссылками. Если перед <base> стоит, к примеру, <link>, то базовый адрес на него действовать не будет. Также базовый адрес не влияет на атрибут manifest в корневом элементе <html>.

В качестве значения можно использовать и адрес сайта, как показано в примере 2.

Пример 2. Адрес сайта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Адреса</title>
  <base href="http://htmlbook.ru/">
 </head>
 <body> 
  <p><img src="example/images/figure.jpg" alt=""></p>
  <p><a href="example/1.html">Ссылка</a></p>
 </body>
</html>

Полный адрес изображения будет http://htmlbook.ru/example/images/figure.jpg. При сохранении страницы на локальный компьютер при её открытии все файлы будут загружаться непосредственно с сайта htmlbook.ru.

Хотя в примерах выше в <base> использовались адреса папок, допустимо указывать и адрес документа:

<base href="example/index.php">

Такой путь не надо подставлять прямолинейно, как это делалось в случае с папками. Адрес документа в href говорит, что относительно него следует задавать пути к файлам. В качестве примера рассмотрим следующую структуру файлов на сайте (рис. 1).

Файлы и папки на сайте

Рис. 1. Файлы и папки на сайте

Если задать базовый адрес как doc/index.html, тогда в файле 1.html пути к остальным файлам поменяются, как показано в примере 3.

Пример 3. Файл 1.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Адрес относительно файла</title>
  <base href="doc/index.html">
 </head>
 <body> 
  <p><img src="../../assets/images/figure.jpg" alt=""></p>
  <p><a href="../2.html">Соседний документ</a></p>
  <p><a href="../../index.html">Вернуться на главную страницу</a></p>
 </body>
</html>

Поскольку перед doc нет дополнительных слэшей, то браузер считает, что папка doc находится в том же месте, что и файл 1.html, т.е. полный путь к базовому файлу относительно корня будет doc/doc/index.html. Не имеет значения, что в действительности такой папки и файла не существует, главное указать относительно неё путь. Поэтому в примере 3 и появляются дополнительные конструкции вида ../. Поскольку адрес в примере фиктивный, замена doc внутри href на любое другое значение (скажем, doc123) не изменит путь к ссылкам.

Хотя пример 3 работоспособный, использование относительных адресов вносит путаницу, поэтому рекомендуем включать перед адресом слэш, который указывает на корень сайта (пример 4).

Пример 4. Базовый адрес относительно папки doc

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Адрес относительно doc</title>
  <base href="/doc/index.html">
 </head>
 <body> 
  <p><img src="../assets/images/figure.jpg" alt=""></p>
  <p><a href="2.html">Соседний документ</a></p>
  <p><a href="../index.html">Вернуться на главную страницу</a></p>
 </body>
</html>

Конструкция /doc указывает на папку doc находящуюся в корне нашего сайта. Учтите, что адреса со слэшем впереди работают только под управлением сервера, но никак не локально.

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

Атрибут target

Значение атрибута target определяет имя контекста, которое применяется для ссылок (<a>) и форм (<form>). В качестве имени контекста обычно указывается имя фрейма или ключевое слово: _blank, _self, _parent или _top.

В качестве примера рассмотрим добавление на страницу фрейма с именем frame, оно определяется атрибутом name тега <iframe>. Чтобы ссылки за пределами фрейма открывались внутри него, в элементе <base> укажем target="frame", как показано в примере 5.

Пример 5. Имя контекста

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Ссылки во фрейме</title>
  <base target="frame">
 </head>
 <body> 
  <p><a href="2.html">2</a> <a href="3.html">3</a></p>
  <p><iframe name="frame" src="1.html"></iframe></p>
 </body>
</html>

Использование <base> в таком качестве равнозначно тому, что для каждой ссылки добавляется target="frame".

Кроме использования имен допустимы следующие ключевые слова.

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

Если одновременно требуются атрибуты href и target, они объединяются в пределах одного тега:

<base href="http://htmlbook.ru/content" target="_blank">

Надо отметить, что значения _parent и _top применяются довольно редко и перешли в HTML5 по наследству из HTML4, где активно применялись фреймы.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.