A link (technically a hyperlink) is what makes the web a web — a piece of text, an image, or any element that takes the user somewhere else when clicked: another page, another site, a file, an email address, or a spot further down the same page.
Why Links Matter
Without links, every page would be an isolated island. Links connect pages into a site, connect sites into the wider web, and give search engines the paths they follow to discover and rank content in the first place.
Syntax
<a href="destination">clickable text</a>Basic Example
<p>Explore our <a href="/cources">courses</a> or read the <a href="/notes">free notes</a>.</p>Browser output: "courses" and "free notes" render as blue, underlined text by default — the browser's built-in visual signal that something is clickable.
The Main Kinds of Links, at a Glance
| Type | Example | Full details |
|---|---|---|
| Internal | <a href="/notes"> | internal-links |
| External | <a href="https://developer.mozilla.org"> | external-links |
<a href="mailto:hello@codingnowai.in"> | email-links | |
| Telephone | <a href="tel:+911234567890"> | telephone-links |
| In-page anchor | <a href="#pricing"> | Jumps to an element with a matching id |
| File download | <a href="/resume.pdf" download> | download-attribute |
Real-World Example
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/cources">Courses</a>
<a href="/notes">Notes</a>
<a href="/contact">Contact</a>
</nav>Every site navigation menu, every "Read more" button, every footer link — all built from the same one tag: <a>.
Comparison: a vs button
<a> | <button> | |
|---|---|---|
| Job | Navigates — takes the user to a new URL or location | Performs an action — submits a form, opens a modal, runs JavaScript |
| Needs a URL? | Yes, via href | No |
| Keyboard default | Activated with Enter | Activated with Enter or Space |
| Wrong when... | Used with href="#" and a click handler purely for styling — should be a button | Used to navigate to another page via JavaScript instead of a real href |
Common Mistakes
- Using
<a href="#">or<a href="javascript:void(0)">to build a button-like action — this breaks middle-click/open-in-new-tab, and confuses assistive technology; use a real<button>instead - Vague link text like "click here" or "read more" repeated across a page, giving screen reader users (who often scan a list of just the links) no idea where each one goes
- Forgetting the
hrefattribute entirely — without it,<a>isn't focusable or keyboard-usable, and isn't really a link at all
Best Practices
- Use
<a>only for navigation to a real destination; use<button>for actions - Write link text that makes sense read on its own, out of context
- Keep link text reasonably concise but descriptive of the destination
Accessibility Considerations
Screen reader users frequently pull up a list of all links on a page to scan for the one they want. "Click here" repeated five times on a page is useless in that list — "Download the course brochure" tells them exactly what they're choosing between.
SEO Considerations
Links are literally how search engines discover pages, and the text inside a link (its anchor text) is a real signal about what the destination page is about. See Anchor Text for the full SEO treatment.
Browser & Modern HTML Notes
The <a> tag has existed since the very first version of HTML and remains functionally unchanged at its core — href is still the only attribute that actually matters for it to work as a link.
Mini Practice
- Build a simple 4-item navigation menu using real
<a href="...">links. - Find a "click here" link online (real or invented) and rewrite its text to be descriptive on its own.
- Identify whether a "Delete item" control on a page should be an
<a>or a<button>, and explain why.
