href stands for hypertext reference: it is the attribute that tells the browser where a link or linked resource points, whether that is an absolute or relative URL, a #fragment on the same page, a mailto: or tel: address, or a file. Without a valid href, an <a> is not a real link, so keyboard focus, middle-click, open in new tab, and crawling all break.
Frontend interview practice question
What is the href attribute used for?
Interview quick answer
Interview focus
This HTML interview question tests whether you can explain HTML href Attribute: Definition, Uses & Examples, connect it to production trade-offs, and handle common follow-up questions.
- HTML href Attribute: Definition, Uses & Examples explanation without falling back to memorized definitions
- Links and Attributes reasoning, edge cases, and production failure modes
- How you would answer the most likely HTML interview follow-up
Interview answer drill
Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
Full interview answer
What does href stand for?
href stands for hypertext reference. It is the HTML attribute that holds the destination of a link or a linked resource, and the browser reads it to decide where to navigate or what to load. On an <a> element it is what turns the text into a hyperlink. The same idea powers anchors, stylesheets, base URLs, and image-map areas.
In production, a missing or fake href (for example href="#" on an element that only runs JavaScript) breaks keyboard access, open in new tab, browser history, and crawling. That is why the attribute matters beyond decoration.
href examples
Each value below changes what the browser does when the link is activated:
HTML
<!-- Absolute URL: another site -->
<a href="https://developer.mozilla.org/">MDN</a>
<!-- Root-relative URL: same site -->
<a href="/coding">Coding practice</a>
<!-- Relative path: resolved against the current page -->
<a href="guides/intro.html">Intro</a>
<!-- Fragment: scroll to the element with id="contact" -->
<a href="#contact">Contact</a>
<!-- Email and phone -->
<a href="mailto:support@example.com">Email support</a>
<a href="tel:+15551234567">Call us</a>
<!-- File download -->
<a href="/files/report.pdf" download>Download report</a>
<!-- Not only anchors: a stylesheet uses href too -->
<link rel="stylesheet" href="styles.css">
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</a>
- Relative URL: Points to a resource relative to the current page’s location.
html
<a href="/coding">Coding Practice</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 broken or incomplete URLs; they hurt 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.
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the HTML interview questions cluster or a guided prep path.
Open frontend interview questionsPractice more HTML interview questionsOpen HTML/CSS interview questionsOpen Essential 60Open Machine Coding HubOpen Question LibraryOpen system design questionsOpen interview preparation guideOpen system design blueprintOpen framework prep pathsOpen Study PlansOpen 7-day crash study planBrowse company questions
Built in public
The code behind FrontendAtlas lives on GitHub. A star helps other frontend engineers find it.