How does this < base > HTML tag work?

Asked

Viewed 678 times

2

hi would like to know how and what works this < base > HTML5 tag ?

html html5 tags

  • This tag is not HTML5. It was already recommended in HTML4.01.

2 answers

1

The tag serves to define the URL and Target that will be default for the entire page.

With this all image paths and links inherited the path that was set in the href attribute set in the base tag. As for example...

<!DOCTYPE html>
 <html>
<head>
    <base href="http://www.site.com/images/" target="_blank">
</head>
<body>
    <img src="suaimagem.jpg" alt="Sua imagem">
    <a href="pagina.html">Link</a>
 </body>

With this all images have inherited the path http://www.site.com/images/, just write the image name in src, it becomes interesting when suddenly you need to change all your images from one folder to another, just change the path in the href of the base tag, instead of changing image by image throughout your site.

But this path will also be applied to all links on the site, but if you don’t want the links to inherit the href from the base tag, just write an absolute path to the link instead of writing relative paths, for example...

<!-- Herdara o caminho definido na tag base -->
<a href="pagina.html">Link</a>
<!-- Não herdara o caminho definido na tag base -->
<a href="http://www.site.com/pagina.html">Link</a>

The base tag should be set only once on the page, and within the tag , and especially before any CSS or Javascript call. So that all Csss and Javascripts also take this path already defined.

Another valid attribute for the tag is target, which must receive one of the following values...

  • _Blank
  • _Parent
  • _self
  • _top
  • Name of a frame

With this all your links also inherited this value for your targets, no need to set link by link.

Source

1

According to w3schools

Tag specifies base URL / target for all Urls relative in a document. There can be at most one element in a document, and it should be within the element <head>.

Basically it prefixes the imports of images, css, js, among others with a url. example:

<base href="/minhapasta/">
<img src="imgs/imagem.jpg">

Without the base set the browser will fetch the image relative to the url where the html that is running is. Let’s say it is at the root: www.meusite.com/imgs/imagem.jpg

Based on it the browser will fetch the image with the prefix set getting: www.meusite.com/minhapasta/imgs/imagem.jpg

Reference:

https://www.w3schools.com/tags/tag_base.asp

Browser other questions tagged html html5 tags

You are not signed in. Login or sign up in order to post.