Learn HTML

HTML: base tag

March 21, 2023
8 Min Read
html base tag

HTML base tag

In this series of learning HTML, we will teach you how to use the HTML base tag with proper syntax and lots of examples. Let’s start with the HTML base tag.

 

 

 

Description of HTML base tag

HTML (Hypertext Markup Language) is a markup language used to create web pages. It consists of a set of tags and attributes that are used to structure content and define its presentation on the web.

The <base> tag is used to specify the base URL for all relative URLs in a web page. It must be placed inside the <head> section of the HTML document.

The <base> the tag has one required attribute, which is href. The href the attribute specifies the base URL for all relative URLs in the document. For example, if the href attribute is set to “https://www.home4cloud.com/“, any relative URLs in the document will be resolved relative to that base URL.

 

 

The syntax for HTML base tag

Here’s an example of how the HTML <base> the tag can be used in an HTML document:

<!DOCTYPE html>
<html>
<head>
<base href="https://www.Home4cloud.com/">
<title>My Home4cloud Web Page</title>
</head>
<body>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</body>
</html>

In this example, the <base> tag specifies that all relative URLs in the document should be resolved relative to the URL “https://www.home4cloud.com/“. The two <a> tags in the <body> section of the document use relative URLs to link to the “about.html” and “contact.html” pages. Since the <base> tag specifies the base URL for relative URLs, these links will resolve to “https://www.home4cloud.com/about.html” and “https://www.home4cloud.com/contact.html“, respectively.

 

 

 

 

Attributes of HTML base tag

The <base> tag in HTML has only one required attribute, and that is:

  • href: Specifies the base URL for all relative URLs in the document.

However, the <base> tag can also have two optional attributes:

  • target: Specifies the default target for all hyperlinks and forms in the document. The value of this attribute can be set to _self, _blank, _parent, or _top.
    • _self – the default value, opens the link in the same frame or window as it was clicked.
    • _blank – opens the link in a new browser window or tab.
    • _parent – opens the link in the parent frame or window.
    • _top – opens the link in the top-level frame or window, replacing any framesets that may be present.
  • rel: Specifies the relationship between the current document and the linked document. The value of this attribute can be set to stylesheet, icon, alternate, author, help, license, next, nofollow, noreferrer, pingback, preconnect, prefetch, preload, prerender, prev, search, or a custom value.

Note that the target and rel attributes are optional and may not always be necessary depending on the content of the web page. The href attribute, on the other hand, is required and specifies the base URL for all relative URLs in the document.

 

 

 

Notes on HTML base tag

Here are some key notes on the <base> tag in HTML:

  • The <base> tag is used to specify the base URL for all relative URLs in an HTML document.
  • The <base> tag must be placed inside the <head> section of the HTML document.
  • The <base> tag has only one required attribute, which is href, and two optional attributes, target and rel.
  • The href attribute specifies the base URL for all relative URLs in the document.
  • The target attribute specifies the default target for all hyperlinks and forms in the document.
  • The rel attribute specifies the relationship between the current document and the linked document.
  • If the <base> tag is not used, all relative URLs in the document are resolved relative to the URL of the current page.
  • The <base> tag can be useful when working with multiple domains or subdomains, or when migrating a website to a new domain.
  • The <base> tag should only be used once per HTML document.

 

html base tag

 

 

Browser Compatibility

The <base> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

 

 

 

Example of HTML base tag

We will discuss the <base> tag below, exploring examples of how to use the <base> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

 

 

HTML5 Document

Here’s an example of an HTML5 document that uses the <base> tag:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home4cloud Page</title>
<base href="https://www.Home4cloud.com/">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Home4cloud Page</h1>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<p>Hello 1.</p>
<p>Hello 2</p>
</main>
<footer>
<p>© 2023 Home4cloud Page</p>
</footer>
</body>
</html>

In this HTML5 Document example, the <base> tag is used to specify that all relative URLs in the document should be resolved relative to “https://www.home4cloud.com/“. The three hyperlinks in the navigation menu (<a href="about.html">, <a href="services.html">, and <a href="contact.html">) will resolve to “https://www.home4cloud.com/about.html“, “https://www.home4cloud.com/services.html“, and “https://www.home4cloud.com/contact.html“, respectively. The <link> tag is also used to load an external stylesheet, which is also resolved relative to the base URL.

 

 

 

HTML 4.01 Transitional Document

Here’s an example of an HTML 4.01 Transitional Document using the HTML base tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Home4cloud HTML Document</title>
<base href="https://Home4cloud.com/">
</head>
<body>
<h1>Welcome to My HTML Document</h1>
<p>This is an example of an Home4cloud HTML document using the base tag.</p>
<p><a href="about.html">About Us</a></p>
<p><a href="products.html">Our Products</a></p>
</body>
</html>

In this HTML 4.01 Transitional Document example, the base tag is used to specify the base URL for all relative URLs used in the document. The href attribute of the base tag specifies the base URL as https://Home4cloud.com/. This means that any relative URLs used in the document, such as the ones used in the href attributes of the a tags will be resolved relative to this base URL.

 

 

 

 

XHTML 1.0 Transitional Document

Here’s an example of an XHTML 1.0 Transitional Document using the HTML base tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My XHTML Document</title>
<base href="https://Home4cloud.com/" />
</head>
<body>
<h1>Welcome to My XHTML Document</h1>
<p>This is an example of an Home4cloud XHTML document using the base tag.</p>
<p><a href="about.html">About Us</a></p>
<p><a href="products.html">Our Products</a></p>
</body>
</html>

In this XHTML 1.0 Transitional Document example, the base tag is used to specify the base URL for all relative URLs used in the document, similar to the HTML example. The href attribute of the base tag specifies the base URL as https://Home4cloud.com/. This means that any relative URLs used in the document, such as the ones used in the href attributes of the a tags, will be resolved relative to this base URL.

Note that in XHTML, the base tag must be closed with a forward slash (/) before the closing > bracket, as shown in the example above. Additionally, XHTML documents must be well-formed, which means they must conform to strict XML syntax rules. This includes using lowercase tag names and attributes, closing all tags, and using properly nested tags.

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict Document using the HTML base tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My XHTML Document</title>
<base href="https://home4cloud.com/" />
</head>
<body>
<h1>Welcome to My Home4cloud XHTML Document</h1>
<p>This is an home4cloud of an XHTML document using the base tag.</p>
<p><a href="about.html">About Us</a></p>
<p><a href="products.html">Our Products</a></p>
</body>
</html>

In this XHTML 1.0 Strict Document example, the base tag is used to specify the base URL for all relative URLs used in the document, similar to the previous examples. The href attribute of the base tag specifies the base URL as https://Home4cloud.com/. This means that any relative URLs used in the document, such as the ones used in the href attributes of the a tags, will be resolved relative to this base URL.

Note that this example uses the XHTML 1.0 Strict doctype, which enforces stricter rules for markup than the Transitional doctype. This includes disallowing certain presentational elements and attributes and requiring certain elements to be properly nested. Additionally, like the previous example, this document must be well-formed to be considered valid XHTML.

 

 

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 Document using the HTML base tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My XHTML Document</title>
<base href="https://Home4cloud.com/" />
</head>
<body>
<h1>Welcome to My Home4cloud XHTML Document</h1>
<p>This is an example of an Home4cloud XHTML 1.1 document using the base tag.</p>
<p><a href="about.html">About Us</a></p>
<p><a href="products.html">Our Products</a></p>
</body>
</html>

In this XHTML 1.1 Document example, the base tag is used to specify the base URL for all relative URLs used in the document, similar to the previous examples. The href attribute of the base tag specifies the base URL as https://Home4cloud.com/. This means that any relative URLs used in the document, such as the ones used in the href attributes of the a tags, will be resolved relative to this base URL.

Note that this example uses the XHTML 1.1 doctype, which is an updated version of the XHTML standard that adds some new features and removes some deprecated features. Like the previous examples, this document must be well-formed to be considered valid XHTML.

 

 

HTML DOCTYPE tag

HTML: time tag

HTML: dfn tag

HTML: li tag

HTML: dl tag

 

Tags

About the author

View All Posts

Home4Cloud