Concept of the HTML <base> Element
The HTML <base> element serves as a foundational tool in web development, allowing you to set a default URL and target for all relative URLs and hyperlinks within a webpage. By defining a base URL, you create a starting point for all the links on the page, streamlining the management of complex structures and multiple relative URLs.
Implementation of the HTML <base> Element
Example 1: Setting a Default URL for Links
<!DOCTYPE html>
<html>
<head>
<base href="https://www.aptlearn.io/" target="_self">
</head>
<body>
<a href="courses">Explore our courses</a> to learn more about our offerings.
</body>
</html>
In this example, clicking the link will direct the user to “https://www.aptlearn.io/courses” in the same tab.
Example 2: Setting a Default Target for Links
<!DOCTYPE html>
<html>
<head>
<base href="https://www.aptlearn.io/" target="_blank">
</head>
<body>
<a href="contacts">Contact us</a> to get in touch with our team.
</body>
</html>
Here, clicking the link will open “https://www.aptlearn.io/contacts” in a new tab.
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes |
Attributes
| Attribute | Value | Description |
|---|---|---|
| href | URL | Defines the base URL for all relative URLs |
| target | _blank, _self, etc. | Sets the default target for hyperlinks and forms |
Global and Event Attributes
The <base> tag also supports the Global Attributes and Event Attributes in HTML.
Default CSS Settings
There are no specific default CSS settings for the <base> element.
Conclusion
The <base> element is an essential and versatile tool in web development, particularly useful for developers working on large-scale projects with numerous relative URLs. By understanding and implementing this element, you can enhance the efficiency and consistency of your web pages.