The href (Hypertext Reference) attribute in HTML defines the target destination of a link or resource. It is most commonly used within the <a> (anchor) tag to specify the URL a user will navigate to when clicking the link.
What is the href attribute used for?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Definition and Purpose
The href attribute stands for Hypertext Reference. It is used to define the URL, file path, or identifier that a hyperlink or resource points to. When applied to an element like <a>, it tells the browser where to go when a user clicks on it.
While it’s most frequently associated with the <a> tag, it can also be used in other elements like <link>, <base>, and <area> to define related resources.
Basic Example
`html
<a href="https://www.wikipedia.org">Visit Wikipedia</a>
In this example, clicking the link will navigate the user to the Wikipedia homepage.
Supported Elements
<a>(Anchor Tag): Defines hyperlinks that connect to other web pages or resources.<link>: Defines external resources such as stylesheets or preloaded assets.<base>: Specifies a base URL for all relative links in a document.<area>: Used in image maps to define clickable regions linked to URLs.
Element | Usage Example | Purpose |
|---|---|---|
|
| Creates a clickable hyperlink |
|
| Links an external CSS file |
|
| Sets a base URL for relative paths |
|
| Defines a linkable area in an image map |
Absolute vs. Relative URLs
The href value can be absolute or relative:
- Absolute URL: Points to an external website with the full address.
html
<a href="https://developer.mozilla.org/">MDN Docs</a>
- Relative URL: Points to a resource relative to the current page’s location.
html
<a href="/about.html">About Us</a>
Anchor Links (In-Page Navigation)
You can also use the href attribute to link to specific sections of the same page by using fragment identifiers:
`html
<a href="#contact">Go to Contact Section</a>
...
<h2 id="contact">Contact Us</h2>
This is often used for smooth scrolling or table-of-contents navigation.
Other Common Uses
- Email links: Opens the user’s default email client.
html
<a href="mailto:support@example.com">Contact Support</a>
- Phone links: Opens a phone dialer on mobile devices.
html
<a href="tel:+123456789">Call Us</a>
Download links: When combined with thedownloadattribute, triggers file downloads.
html
<a href="files/report.pdf" download>Download Report</a>
Security and Best Practices
- Always use absolute URLs when linking to external websites.
- Add the attribute
rel="noopener noreferrer"when usingtarget="_blank"to prevent malicious access to the parent window. - Avoid using broken or incomplete URLs — it can harm SEO and accessibility.
- For internal navigation, prefer relative links for flexibility during site deployment.
Still so complicated?
Think of href as the address label on a hyperlink. Without it, the browser has nowhere to go — it’s like clicking on a button with no destination. Once you add href, you’re telling the browser exactly where that link should lead, whether it’s another webpage, a document, or even a specific section on the same page.
Summary
The href attribute specifies the destination or resource reference for hyperlinks and linked content in HTML. It transforms text or other elements into interactive links that guide users to external pages, internal sections, downloadable files, or other resources. Mastering href usage is fundamental for creating a connected, accessible, and user-friendly web experience.
Similar questions
Guides