HTML Base

The <base> tag in HTML is used to set a base URL or URI for relative links within a document. This tag allows you to define a base path, which simplifies the management of URLs in your HTML document. Here's a detailed overview of the <base> tag:

Purpose

The <base>  tag specifies a base URL for all relative URLs in a document. This is particularly useful when you have many relative links and want to ensure they all point to the same base URL. It also allows you to set a default target for links, such as opening them in a new window or tab.

Syntax:

<base href=" https://waytocode.in//" target="_blank">

Attributes

href: The base URL or path. If not specified, it defaults to the URL of the document itself.

target: Specifies where to open the linked documents. Common values are:

_self: Opens the link in the same frame or window (default).

_blank: Opens the link in a new window or tab.

_parent: Opens the link in the parent frame.

_top: Opens the link in the full window.

Specifications

Display: The <base>  tag does not display anything on the webpage.

Start Tag/End Tag: It only requires a start tag and does not need an end tag. In XHTML, an end tag </base> is required.

Usage: It affects the relative URLs in anchors (<a>) and links (<link>).

Key Points

Single Base Tag: Only one <base> tag is allowed in a document.

Placement: Must be placed within the <head> section of the HTML document.

Effect on URLs: Changes the base URL for all relative URLs in the document, including links, images, and other resources.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <base href=" https://waytocode.in/" target="_blank">
  <title>Base Tag Example</title>
</head>
<body>
  <h1>Using the Base Tag</h1>
  <p><a href="page1.html">Link to Page 1</a></p>
  <p><a href="page2.html">Link to Page 2</a></p>
  <p><link href="styles.css" rel="stylesheet" type="text/css"></p>
</body>
</html>