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

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

Как использовать HTML-тег <base><figcaption id=» width=»400″ />
Для небольших ресурсов с несложной структурой это не даст большого эффекта. Но для веб-сайтов с многоуровневой структурой каталогов тег <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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *