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

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

html-base-tag

Для небольших ресурсов с несложной структурой это не даст большого эффекта. Но для сайтов с многоуровневой структурой каталогов тег <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» дружной командой проекта Сайтостроение от А до Я.

15 сентября 2017 в 10:07
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок