DEV Community

Nicole Zonnenberg
Nicole Zonnenberg

Posted on • Updated on

Cover Your Base (Element)

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

Top comments (2)

Collapse
 
the24thds profile image
David Sima

I was not aware of this HTML element! Thank you πŸ˜ƒ

Collapse
 
ben profile image
Ben Halpern

Really neat πŸ‘Œ