In the HTML API, there are many tags or elements that are very rarely used because they have very specific functions and are therefore not as famous, but they are equally useful; today we will look at a couple of HTML tags that you might not know:
Previously you learned how to natively embed audio and videos using HTML.
The <base> Tag
This element defines a global URL and/or target for the document that allows overriding the target and/or href attributes that are not specified in an <a> element.
IMPORTANT! there can only be one <base> element in the document's
head.
If you've ever worked with relative links, long paths, or lots of pages that share the same structure, you've probably wondered at some point if there's a more convenient way to manage all of that. And yes: there is. It's called the <base> tag, and although many overlook it, it can save you hours of work and headaches.
In this article, I'll tell you what it is, how it works, and show you real examples (including one where I ran into an empty link that ended up opening in Bing because of the base URL... yes, it happened).
What the <base> tag is and what it is used for
The <base> tag allows defining a base URL and/or a global target for all relative links and resources in the document. Simply put: it sets "where" the links that don't have a complete path "start from."
How the browser interprets the base URL
When the browser finds <base href="https://ejemplo.com/">, any relative link like about.html automatically becomes:
https://example.com/about.htmlThis applies to links, images, scripts, or any resource that uses relative paths.
In what cases is it convenient to use it
- Large sites with many pages.
- Projects where you want all links to open the same way (same tab or new tab).
- Documentation or demos that use short relative paths.
- Avoiding duplication of long paths in every link.
Syntax of <base>: href and target attributes
As we mentioned before, there can only be a single <base> in the head. Furthermore, it is an empty element, so it does not have a closing tag.
<base href="https://example.com/seccion/" target="_blank">href: how it defines the base path for links and resources
The href attribute marks the URL that will be used as the base for all relative links.
For example, by leaving an empty link like this:
<a href="">Google.com</a>The browser directly used the URL from the <base>. In my case, it ended up unintentionally sending me to Bing because I had defined it as the base in the head.
target: how it controls link opening
target defines where links that do not have their own target will open.
Most used values:
- _self → in the same tab.
- _blank → new tab (the one I usually use when I want navigation not to distract from the main page).
- _parent and _top → less common, useful with frames.
In one of my examples, by using:
<base href="https://www.bing.com/" target="_blank">All links without an explicit target opened in a new tab thanks to this attribute.
Quick examples of correct use
<head> <base href="https://miweb.com/blog/" target="_self"> </head> <body> <a href="post-1.html">View post</a> <img src="img/portada.png"> </body>Results:
- post-1.html → https://miweb.com/blog/post-1.html
- img/portada.png → https://miweb.com/blog/img/portada.png
How <base> works in practice (with real examples)
What happens when a link has no href
An <a href="">Text</a> directly adopted the base URL and ended up taking me to that exact URL. If <base href="https://www.bing.com/">, then the link points to Bing, even if the text says “Google.com”.
What happens if the link does have an absolute href, there are no surprises here: the absolute path always wins.
<base href="https://www.bing.com/"> <a href="https://google.com/">Google</a>This link will take you to Google. No tricks.
How it affects the target when not specified in the link
I also experienced this when testing examples: if <base target="_blank"> and the link does not include a target, that link inherits _blank.
That's why even internal links were opening in a new tab.
Best practices, common errors, and how to avoid them
- There can only be one <base>: why and what happens if you add more
- Browsers only use the first one. Any additional <base> is ignored.
- That's why it's important to place it correctly and only once.
Frequent issues with relative paths and how to solve them
- Typical errors:
- Setting an incorrect base href.
- Using relative paths that start with /, which ignores the <base>.
- Mixing absolute and relative paths without a strategy.
- Solution:
- Always check with inspection tools.
- Test links and images after implementing <base>.
- Check if relative paths start with / (that breaks the base logic).
When you should NOT use <base>
- In SPA applications with routers (like React Router): it can interfere.
- On sites where each page has very different paths.
- When working with many absolute paths: it provides no real benefit.
Advanced practical cases
Sites with many pages and deep paths
If your structure is like this:
/blog/ /blog/articulos/ /blog/articulos/2025/Having:
<base href="https://miweb.com/blog/articulos/">Simplifies links like:
<a href="2025/post-1.html">Behavior with images, scripts, and static resources
The <base> affects:
- images
- scripts
- CSS
- iframes
- forms with relative action
That's why it's important to define it considering all resources, not just links.
How to override the <base> behavior in a specific link
Very simple: use an absolute href or add its own target.
<a href="https://externo.com" target="_self">Go to external without new tab</a>Compatibility, specification, and browser behavior
What the current HTML specification says
- It is an empty element.
- It belongs to the metadata category.
- It must be inside the <head>.
- The DOM exposes it as HTMLBaseElement.
document.baseURI allows inspecting the base URL proposed by the browser.
Browser compatibility
Full compatibility:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Examples
If we have the following HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Base element 1</title>
<base href="https://www.bing.com/" target="_blank">
</head>
<body> <a href="">Google.com</a> </body>
</html>
We will see that when clicking on the "Google.com" link, it will redirect us to Microsoft's search engine at the following address: https://www.bing.com/.
If, on the contrary, we specify the URL in the link's href attribute:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Base element 2</title>
<base href="https://www.bing.com/" target="_blank">
</head>
<body> <a href="http://www.google.com/">Google.com</a> </body>
</html>The link will redirect us to Google.com, although since the target is not specified, the link will open in a new tab.
The <abbr> tag
The <abbr> tag is one of those little gems of semantic HTML that we often overlook, but which brings a lot of clarity to the content. It is used to mark abbreviations and acronyms, informing the browser -and users- that this word has an extended version.
The best part is that it improves accessibility, semantic SEO, and the reader's experience effortlessly. When I first used it to define PHP with its full expansion -PHP Hypertext Pre-processor-; the tooltip clarified the reading without interrupting the flow of the text. That little detail makes a difference.
How to use <abbr> step by step (with real examples)
Basic example
This is the simplest use: you only mark the abbreviated term.
<p>The term <abbr>Km</abbr> is a unit of length.</p>Without attributes, you simply indicate that “Km” is an abbreviation.
Example with title attribute
Here you provide the full version of the term. It is the most common form:
<p>The programming language <abbr title="PHP Hypertext Pre-processor">PHP</abbr> is very popular.</p>As I mentioned before, when I marked “PHP” like this in a project, the browser automatically displayed the description on mouse hover. It's a simple way to add context without overloading the text.
Combined use with <dfn>
When defining a new term, you can combine both tags:
<p> The term <dfn><abbr title="Kilometer">Km</abbr></dfn> is a unit of length. </p>This makes it clear that “Km” is the definition of the concept and, at the same time, an abbreviation.
Best practices from experience
Over time, I've learned these simple rules:
- If the abbreviation can be confusing, always mark it with <abbr>.
- If you've already explained it once, you don't need to repeat the title.
- Avoid putting overly long definitions inside the title.
Check the tooltip in various browsers: some show dotted underlines, others small caps, others nothing (I've suffered it…).
When it's convenient to use <abbr> and when not
Useful cases for:
- For technical terms (HTML, CSS, JS, API…).
- For official entities (UN, WHO, EU).
- For units and measures (Kg, Km, ml).
- For long concepts whose meaning you want to clarify without interrupting the reading.
Situations where it is better to avoid it:
- When the context already makes the meaning clear.
- When the abbreviation appears so many times that the tooltip becomes annoying.
- When the full expansion is right in the text; in that case, do not use the title.
Accessibility: the big reason to use <abbr>
This is where the <abbr> tag is most useful. Screen readers can better interpret the abbreviation when the title attribute is included. This helps:
- People who do not know the technical term.
- Readers with cognitive difficulties.
- Users who do not master the language.
Recommended rules
- State the full term at least once on the page.
- Use title only if you have not put the expansion in the text.
- Keep the definition brief and accurate.
Common errors
- Believing that title is mandatory (it is not).
- Using overly long texts inside the attribute.
- Repeating the expansion in all occurrences.
Styles and visual behavior of the element
By default, <abbr> is inline. The browser can:
- Underline it with dots.
- Display it in small caps.
- Or not apply any special style to it.
- Underlines, small caps, and tooltips
It is normal for the tooltip from the title attribute to be displayed or not depending on the system. It has happened to me that the default style was not visible at all, so I usually apply a small indicator:
abbr { text-decoration: underline dotted; cursor: help; }Customization with CSS
You can style it like any inline element:
abbr.api { font-weight: bold; color: #0055ff; }Comparison: <abbr> vs <dfn>
- <abbr> → Marks an abbreviation or acronym.
- <dfn> → Indicates the term being defined.
You can use them together or separately. If you are only explaining an abbreviation, <abbr> is enough. If you introduce a formal definition, include <dfn>.
Practical examples ready to copy
Simple abbreviation
<p>We are migrating the website to <abbr>HTTPS</abbr>.</p>With clear expansion
<p>The <abbr title="JavaScript Object Notation">JSON</abbr> format is widely used.</p>In lists or tables
<li><abbr title="Germany">DE</abbr></li> <li><abbr title="Brazil">BR</abbr></li>With JavaScript interaction
<abbr title="Canada" onclick="alert('Canada is the second largest country in the world.')">CA</abbr>Frequently asked questions about <abbr>
- Is the title attribute mandatory?
- No. You can use <abbr> without a title if the expansion appears in the text.
- Does Google use the information in the title attribute?
- Not directly for ranking, but it does improve the semantics and understanding of the content.
- Can I use <abbr> anywhere in the document?
- Yes, as long as the parent element accepts text content.
- How does it affect accessibility?
- It helps a lot, especially if you introduce technical terms.
In a nutshell:
<abbr> = abbreviation marked with semantics + option for full explanation
In summary, the element simply allows defining an abbreviation as we can see in the following example:
<p>The programming language <abbr title="PHP Hypertext Pre-processor">PHP</abbr>...</p>Consult the official documentation at the following links:
✔️ Conclusion
- The <abbr> tag is simple yet powerful: it provides accessibility, clarity, and semantics to web content. Not only does it improve the user experience, but it also helps your HTML be cleaner and more professional. In my experience, marking abbreviations like “PHP”, “JSON”, or “UN” with their corresponding expansions avoids confusion and gives an impression of editorial care that always adds value.
- The <base> tag is one of those invisible tools that, when you understand it well, simplifies site maintenance and helps you have cleaner and more coherent paths. It's not magic, but it's very convenient in complex structures.
- In my tests (including that time when I accidentally linked to Bing with an <a href="">), I confirmed that properly understanding how links inherit the base URL and target avoids hard-to-detect errors.
- Use it when it makes sense, test it thoroughly, and take advantage of it to have more orderly and coherent HTML.
I agree to receive announcements of interest about this Blog.
The HTML API contains many tags or elements that are rarely used because they have very specific functions and are therefore not very well known, but they are equally useful; today we will see a couple of HTML tags that you may not know.