Syntax
<base href="https://example.com/" target="_blank">Examples
Base URL
Setting a base so relative links resolve consistently.
<head>
<base href="https://codectionary.com/docs/">
</head>
<body>
<a href="html">HTML Docs</a>
<!-- resolves to https://codectionary.com/docs/html -->
</body>Base Target
Making every link on the page open in a new tab by default.
<head>
<base target="_blank">
</head>
<body>
<a href="https://example.com">Opens in new tab</a>
</body>Combined href and target
Setting both a base URL and default target together.
<base href="https://cdn.example.com/assets/" target="_self">Attributes
- href (URL): The base URL for all relative URLs in the document
- target (_blank | _self | _parent | _top): The default target for all links and forms
Best practices
- Use at most one <base> element per document, placed early inside <head>
- Be careful with base href — it affects every relative URL on the page, including images and scripts, not just links
- Prefer explicit absolute or relative paths over relying on base href for most projects, since it can cause confusing bugs when forgotten
- Remember individual links can still override a base target with their own target attribute
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<meta>
The <meta> element provides metadata about the HTML document that is not displayed on the page itself — used for things like character encoding, viewport configuration, page descriptions for search engines, and social media preview data. Meta tags live inside the <head> and are void (self-closing) elements.<link>
The <link> element establishes a relationship between the current document and an external resource, most commonly a stylesheet. It lives in the <head> and is a void element. Beyond stylesheets, <link> is also used for favicons, preloading resources, and specifying alternate versions of a page.<style>
The <style> element contains embedded CSS rules that apply directly to the current document, as an alternative to linking an external stylesheet with <link>. It normally lives inside <head>, though the scoped nature of modern CSS means it can technically appear in body content too.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.
The <meta> element provides metadata about the HTML document that is not displayed on the page itself — used for things like character encoding, viewport configuration, page descriptions for search engines, and social media preview data. Meta tags live inside the <head> and are void (self-closing) elements.<link>
The <link> element establishes a relationship between the current document and an external resource, most commonly a stylesheet. It lives in the <head> and is a void element. Beyond stylesheets, <link> is also used for favicons, preloading resources, and specifying alternate versions of a page.<style>
The <style> element contains embedded CSS rules that apply directly to the current document, as an alternative to linking an external stylesheet with <link>. It normally lives inside <head>, though the scoped nature of modern CSS means it can technically appear in body content too.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.