Как использовать 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.