HTML5: How to specify the base URL/target for all relative URLs in a document?

Last update on February 06 2024 11:31:03 (UTC/GMT +8 hours)

Solution :

HTML Code:

<!DOCTYPE html><!-- Specifies the document type as HTML -->
<html><!-- Starts the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<meta charset="utf-8"><!-- Defines the character encoding for the document as UTF-8 -->
<title>How to specifie the base URL/target for all relative URLs in a document</title><!-- Sets the title of the HTML page -->
<base href="https://www.w3resource.com/"><!-- Specifies the base URL for all relative URLs in the document -->
</head>
<body><!-- Contains the visible content of the HTML document -->
<ul><!-- Defines an unordered list -->
<li><a href="php/php-home.php">PHP Tutorial</a></li><!-- Defines a list item with a hyperlink to a PHP tutorial -->
<li><a href="javascript/javascript.php">JavaScript Tutorial</a></li><!-- Defines a list item with a hyperlink to a JavaScript tutorial -->
<li><a href="mysql/mysql-tutorials.php">MySQL Tutorial</a></li><!-- Defines a list item with a hyperlink to a MySQL tutorial -->
</body>
</html>

Explanation:

The <!DOCTYPE html> declaration specifies the document type and version of HTML.
The <html> element is the root element of the HTML document.
The <head> section contains metadata about the HTML document, such as the character encoding and title.
The <meta> tag defines metadata for the HTML document, such as the character encoding, specified here as UTF-8.
The <title> tag sets the title of the HTML page.
The <base> tag specifies the base URL for all relative URLs in the document, in this case, "https://www.w3resource.com/".
The <body> element contains the visible content of the HTML document.
The <ul> tag defines an unordered list.
The <li> tags define list items, each containing a hyperlink to a specific tutorial page.
The <a> tags define hyperlinks with relative URLs to PHP, JavaScript, and MySQL tutorials, which will be resolved relative to the base URL specified in the <base> tag.

Live Demo:

See the Pen base-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go To Home page