Blogs Design & Development

Specifies the Base URL With HTML5 Element

Contents HTML base Tag: Main Tips Use of base Attributes for base Browser Support HTML base Tag: Main Tips <base> the element defines the base URL for all the relative links in the HTML document. HTML <base> the tag does not have the closing tag. Use of base <base> specifies the HTML base URL for relative links in a web page. <!DOCTYPE html> … Continue reading Specifies the Base URL With HTML5 Element

By

Contents

  1. HTML base Tag: Main Tips
  2. Use of base
  3. Attributes for base
  4. Browser Support

HTML base Tag: Main Tips

  • <base> the element defines the base URL for all the relative links in the HTML document.
  • HTML <base> the tag does not have the closing tag.

Use of base

<base> specifies the HTML base URL for relative links in a web page.

<!DOCTYPE html>
<html>
<head>
<title>HTML base tag example</title>
<base href=”https://thevellapanti.in/“>
<script type=”text/javascript” src=”scripts.js“> </script>
<link rel=”stylesheet” href=”styles.css“>
</head>
<body>
<img src=”https://thevellapanti.in/laptop.png“>
</body>
</html>

There are certain rules for using this element:

  • <base> HTML must be included only once in the HTML file.
  • It has to be put in the <head>.
  • Do not add content inside the HTML <base> tag.
  • Do not include a closing tag.

Attributes for base

href

The <base href=""> defines the base URL for all the relative URLs in the document.

<!DOCTYPE html>
<html>
<head>
<base href=”https://thevellapanti.in/category/design-dev/“>
<script type=”text/javascript” src=”scripts.js“></script>
<link rel=”stylesheet” href=”styles.css“>
</head>
<body>
<a href=”specifies-the-base-url-with-html5-element“>Link to course</a>
</body>
</html>

target

By including the target attribute, you can set the <base> HTML to open links either in the current browser window or in a new one.

<!DOCTYPE html>
<html>
<head>
<base target=”_blank“>
<script type=”text/javascript” src=”scripts.js“></script>
<link rel=”stylesheet” href=”styles.css“>
</head>
<body>
<p><a href=”https://thevellapanti.in/“>Thevellapanti</a></p>
</body>
</html>

  • _self opens the link in the same browser window.
  • _blank opens the link in a new browser window.
  • _parent opens a link in a parent window of the current window.
  • _top opens a link in the top-level browsing window.

You may also like