HTML <base> Tag
The <base> tag specifies the base URL and the default target for all relative URLs in a document. It's a crucial element for managing links, especially when dealing with complex site structures or when URLs are relative to a specific location. Using the <base> tag can simplify link management and prevent broken paths.
Syntax
<base href="url" target="_blank|_self|_parent|_top|framename" >
Attributes
| Attribute | Value | Description |
|---|---|---|
href |
URL | Specifies the base URL for all relative URLs in the document. |
target |
_blank _self _parent _top framename |
Specifies the default target for all hyperlinks and forms in the document that do not have their own target attribute. |
Example
<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/blog/" target="_blank">
</head>
<body>
<a href="article1">Article 1</a>
<a href="article2">Article 2</a>
</body>
</html>
More Examples
Example 1: Setting a Base URL
This example demonstrates how to set a base URL for all relative links.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.mywebsite.com/resources/">
</head>
<body>
<a href="images/logo.png">Website Logo</a>
<img src="images/banner.jpg" alt="Website Banner">
<a href="docs/user-guide.pdf">User Guide</a>
</body>
</html>
In this case, even though the links appear to be relative (e.g. images/logo.png), the browser resolves them against the base URL: https://www.mywebsite.com/resources/ , effectively directing users to https://www.mywebsite.com/resources/images/logo.png.
Example 2: Setting a Default Target
This example shows how to set a default target for all hyperlinks.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.mywebsite.com/" target="_blank">
</head>
<body>
<a href="about">About Us</a>
<a href="contact">Contact</a>
<a href="blog">Our Blog</a>
</body>
</html>
In this scenario, every link on the page will open in a new tab or window (target="_blank"), regardless of whether the individual <a> tags specify a target attribute.
Example 3: Using the target attribute with specific links
This example illustrates how to override the base target on specific links
<!DOCTYPE html>
<html>
<head>
<base href="https://www.mywebsite.com/" target="_blank">
</head>
<body>
<a href="about">About Us</a>
<a href="contact" target="_self">Contact</a>
<a href="blog">Our Blog</a>
</body>
</html>
Here, all links will open in new window except "Contact" link, due to its target="_self" property.
Example 4: Working with Forms
The target attribute also applies to forms, so you can control the target window for form submissions.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com" target="_blank">
</head>
<body>
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your name">
<input type="email" name="email" placeholder="Your email">
<button type="submit">Submit</button>
</form>
</body>
</html>
The form submission will happen in new tab because of the target="_blank" set in <base>.
Browser Support
The <base> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- The
<base>tag should be placed within the<head>section of your HTML document. - Only one
<base>tag is allowed per document. If multiple<base>tags are present, the first one will be used and any subsequent tags will be ignored. - It's important to use the
<base>tag consistently to avoid unexpected behavior. - When using a
targetattribute with the<base>tag, make sure to provide a way for users to control the opening of links. Usingtarget="_blank"for all links might annoy some users and it can be detrimental to accessibility. - Be cautious when using
<base>tag with single page applications where URL paths can change dynamically. - The
<base>tag is particularly useful for static websites where you want to manage relative paths from a central point. - When setting the base URL, ensure it ends with a forward slash (
/) if all links should be relative to a specific directory, as shown in some of the examples above. - Using
<base>is useful when serving HTML from different sub directories.
By using the <base> tag effectively, you can streamline your HTML code and improve the maintainability of your web pages.
