HTML '<base>' Tag - Complete Guide with Syntax, Attributes, and Examples

Home 〉 HTML Tutorials 〉 HTML '<base>' Tag - Complete Guide with Syntax, Attributes, and Examples

HTML '<base>' Tag - Complete Guide with Syntax, Attributes, and Examples !

Do you want to manage all your page URLs more efficiently with just one tag?

Then understanding and using the HTML '<base>' tag is the key! This tutorial explains what the base tag does, its syntax, attributes like 'href' and 'target', and how they affect your web page. You've also seen real-world examples and how to style relevant elements for better design. The detailed blog post on HTML base tag is as follows.

Introduction

The HTML '<base>' tag is used to define a base URL and/or target for all relative URLs in a document. It helps web browsers understand how to resolve links and media paths consistently from a single base address.

When working on large websites, the '<base>' tag can reduce redundancy and make relative URLs easier to manage.

Syntax and Explanation

Syntax ✍

'<base>': This tag must be placed inside the '<head>' section.
'href': Sets the base URL for all relative URLs on the page.
'target': Defines where to open linked documents (e.g., '_blank', '_self', '_parent', '_top').

Important: Only one '<base>' tag is allowed per document. If multiple are used, only the first one is considered.

Is '<base>' a Block, Inline, or Empty Element?

The '<base>' tag is an empty element — it does not have any closing tag or inner content. It is also a metadata element and is used only in the '<head>' section.

Attributes of HTML '<base>' Tag

The following are the attributes of HTML base tag:

'href:' Specifies the base URL for all relative URLs in the document.
'target': Specifies the default target for all hyperlinks and forms in the document.

'href' Attribute

Example 📄

<base href="https://www.mywebsite.com/">
<a href="about.html">About Us</a>

The 'href' attribute sets the base path. So, the anchor link points to 'https://www.mywebsite.com/about.html' instead of just 'about.html'.

'target' Attribute

Example 📄

<base target="_blank">
<a href="https://example.com">Visit</a>

All links will now open in a new tab because the base 'target' is set to '_blank'.

CSS Inline Styling Example

Although '<base>' doesn't render content on the page, here's a sample context to help visualize inline styling in a related element:

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<a href="contact.html" style="color: blue; font-size: 16px; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px;">
Contact Us
</a>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Conclusion

The '<base>' tag is a powerful but often overlooked HTML element. It simplifies URL management and improves the consistency of resource linking across large websites. While it doesn't display anything on the page, it plays a crucial behind-the-scenes role in defining document behavior.

Use it correctly in the '<head>' section and ensure only one '<base>' tag per page.

Frequently Asked Questions (FAQs)

Can I use more than one '<base>' tag in HTML?

No, only the first '<base>' tag is used. Others are ignored.

Where should I place the '<base>' tag in an HTML document?

It should be placed inside the '<head>' tag.

Does the '<base>' tag affect JavaScript and CSS URLs?

Yes, it affects all relative URLs in the HTML document, including JS and CSS.

What happens if the 'href' in the '<base>' tag is incorrect?

All relative URLs will resolve incorrectly, potentially breaking links and resources.

Previous Post Next Post