how does this HTML base tag work?

Navigation
2

Hello, I would like to know how and what this < base > of HTML5?

    
asked by anonymous 25.11.2018 / 16:46

2 answers

1

According to w3schools

  

The tag specifies the URL / target basis for all URLs   in a document.   There may be at most one element in a document, and it should   be within the <head> element.

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

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

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

With the base it the browser will get the image with the prefix defined by getting: www.meusite.com/minhapasta/imgs/imagem.jpg

Reference:

link

    
25.11.2018 / 17:00
0

The tag serves to set the URL and Target that will default to the entire page.

With this, all image paths and links inherited the path that was defined in the href attribute set in the base tag. 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 the images have already inherited the path link , simply write the image name in src, it becomes interesting when suddenly you need to change all your images from one folder to another by simply changing the path in the href of the base tag, rather than changing image by image throughout your site.

But this path will also be applied to all links in the site, but if you do not 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 calls. So that all CSSs and JavaScripts also take this path already defined.

Another valid attribute for the tag is the target, which should 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, not needing to define link per link.

Font

    
26.11.2018 / 18:19
Calculate values in jQuery true giving problem (bug) in code [closed]