Как использовать HTML-тег <base>

Когда имеет значение каждый байт, можно использовать HTML-тег base href, чтобы указать атрибуты target по умолчанию для всех относительных URL-адресов на странице:

Для небольших ресурсов с несложной структурой это не даст большого эффекта. Но для сайтов с многоуровневой структурой каталогов тег <base> существенно уменьшит объем страниц, а также обеспечить четкость и краткость URL-адресов.

Преимущества тега <base>

Преимущества использования тега <base>:

  • Уменьшает объем страницы;
  • Экономит трафик;
  • Более короткие URL-адреса;
  • Чистая разметка;
  • Помогает при просмотре страниц в автономном режиме;
  • Упрощает миграцию (нужно изменить всего одну ссылку, а не многие);
  • Упрощает перенаправление относительных URL-адресов.

Даже с учетом всех этих преимуществ base href base url используется не на многих страницах. Это связано с тем, что данный тег имеет несколько недостатков.

Потенциальные недостатки тега <base>

  • Проблемы при прозрачной перезаписи URL-адресов;
  • Могут возникать проблемы при просмотре в старых браузерах.

Информация по тестам поддержки браузерами тега и их результатам. Это не является проблемой, если вам не нужно учитывать большинство архаичных браузеров.

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

Пример. Указание URL-адреса по умолчанию

Рассмотрим пример использования тега <base> для указания URL по умолчанию, который будет применяться ко всем относительным URL-адресам на странице, включая атрибуты src и href. Это означает, что <base> относится к изображениям, гиперссылкам, iframe, формам, скриптам.

Например, все изображения содержатся где-то в каталоге:

http://example.com/here/is/my/deeply/nested/set/of/images/example.jpg

Его можно указать с помощью относительного пути:

/here/is/my/deeply/nested/set/of/images/example.jpg

Это короче, но все равно добавляет несколько байтов к объему, особенно если на странице используется несколько изображений. Например, использование подобного пути для каждого изображения в галерее уменьшает общий объем. Можно сделать еще лучше, указав URL-адрес по умолчанию с помощью тега <base>. Для этого добавьте следующий код base href site url в раздел head:

<head>
	<base href="http://example.com/here/is/my/deeply/nested/set/of/images/">
</head>

При этом можно исключить весь путь для файлов изображений. Поэтому вместо того, чтобы указывать для галереи изображений следующее:

<img src="/here/is/my/deeply/nested/set/of/images/example-01.jpg" alt="">
<img src="/here/is/my/deeply/nested/set/of/images/example-01.jpg" alt="">
<img src="/here/is/my/deeply/nested/set/of/images/example-03.jpg" alt="">
.
.
.

можно просто добавить приведенный ниже код:

<img src="example-01.jpg" alt="">
<img src="example-01.jpg" alt="">
<img src="example-03.jpg" alt="">
.
.
.

В зависимости от количества файлов, которые вы используете, <base> может существенно уменьшить объем страницы и сохранить разметку чистой.

Пример: Указание атрибута target по умолчанию

Тег HTML base href также может применяться для указания атрибута target, используемого по умолчанию в ссылках, формах, iframes и т.д. Например:

<head>
	<base target="_blank" href="http://example.com/your/default/path/">
</head>

Используя приведенный выше код, можно исключить атрибут target из тегов ссылок. Вместо того чтобы писать для каждой ссылки, размещенной на странице, что-то вроде этого:

<a target="_blank" href="somewhere.html">Example Link</a>

можно сделать следующим образом:

<a href="somewhere.html">Example Link</a>

Что еще больше уменьшает общий объем веб-страницы. Конечно, это не огромная экономия, но при оптимизации производительности значение имеет каждый бит.

Исключение URL-адресов из значения по умолчанию

Что делать, если вы хотите включить ссылки на ресурсы, расположенные не по тому адресу, который указан в <base>? Тег base href http применяется только к URL-адресам, которые относятся к базовому URL-. Например, на странице мы ссылаемся на следующие URL-адреса:

http://example.com/something/somewhere/
/something/somewhere/
something/somewhere/

Без тега <base> эти URL-адреса будут обрабатываться как есть. А теперь добавим через <base> URL-адрес по умолчанию:

<base href = "http://example.com/default/directory/">

При этом предыдущие примеры URL-адресов меняются следующим образом:

http://example.com/something/somewhere/
/something/somewhere/
http://example.com/default/directory/something/somewhere/

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

Поддержка браузерами

Тег <base> поддерживается основными браузерами:

  • Chrome;
  • Firefox;
  • Opera;
  • Safari;
  • Internet Explorer.

Заключение

Несколько полезных заметок по base href:

  • Необходимо использовать абсолютные URL-адреса для идентификаторов фрагментов (анкоры / хэш-ссылки), например #whatever;
  • Нужно использовать абсолютные URL для адресов строки запроса, например ?whatever=something;
  • Всегда указывайте конечную косую черту в базовом URL-адресе (чтобы это была ссылка на каталог, а не на файл);
  • Тег <base> должен быть включен в раздел <head>;
  • На каждой веб-странице может быть только один тег <base>;
  • Тег <base> должен включать в себя атрибут href, атрибут target или оба сразу;
  • Добавляйте <base> перед всеми другими тегами в разделе <head>, чтобы он применялся для URL-адресов скриптов, стилей и т. д.

Я надеюсь, что данная статья помогла вам разобраться с HTML base href.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «How to use the HTML base tag»