Cover Your Base (Element)

Nicole Zonnenberg - May 12 '19 - - Dev Community

The <base> tag is a child of the <head> tag that can pass down a specific URL to all link elements in an HTML document.

<head>
    // If the <base> tag contains a URL

    <base href="http://fakeurl.dev/">
<head>
Enter fullscreen mode Exit fullscreen mode

You can write <a> tags as the following:

// A simple <a> tag without a specific 
<a>Link One</a>

// An anchor
<a href="#anchor">Link Two</a>

// A path from the original index.html of the URL
<a href="/fakepath">Link Three</a>
Enter fullscreen mode Exit fullscreen mode

The links will direct as follows:

// A simple <a> tag without a specific 
<a href="http://fakeurl.dev/">Link One</a>

// An anchor
<a href="http://fakeurl.dev/#anchor">Link Two</a>

// A path from the original index.html of the URL
<a href="http://fakeurl.dev/fakepath">Link Three</a>
Enter fullscreen mode Exit fullscreen mode

You can also pass down a specific attribute, such as a target.

<head>
    <base target="_blank">
    // will ensure that all links will open in a separate tab.
</head>
Enter fullscreen mode Exit fullscreen mode

Note: There can only be one <base> tag in a head. If there is more than one it will recognize only the first href and target values.

Further reading.

CodePen Example by Sarah Drasner

. . . . . . . . . . .