The a Element (Anchor Tag)

The <a> (anchor) tag is the actual HTML element behind every link. Its one required job is pointing somewhere via the href attribute — everything else is optional configuration.

Syntax

<a href="destination" target="_blank" rel="noopener" title="extra info">
    link text
</a>

Basic Example

<a href="/cources/data-science.php">View the Data Science course</a>

Browser output: blue, underlined text by default; the mouse cursor changes to a pointer on hover, and clicking navigates the browser to /cources/data-science.php.

How It Works

1. The browser reads href and treats the entire element as a navigable, focusable, keyboard-activatable link.
2. Anything can go inside an <a> — plain text, an <img>, even a whole block of content — making the entire block clickable.
3. Without href, an <a> is not a real link — it won't be keyboard-focusable and browsers won't style it as clickable.

Important Attributes

Real-World Example

<a href="/cources/MERN_Stack.php">
    <img src="/assets/images/mern-course.jpg" alt="MERN Full Stack course thumbnail">
    <h3>MERN Full Stack Development</h3>
</a>

A whole "course card" — image and heading together — made clickable by wrapping both inside one <a>. This is valid HTML5; block-level content inside <a> was not allowed in older HTML versions.

Common Mistakes

• Leaving href empty (href="") — this actually links back to the current page, which is rarely what's intended
• Wrapping large chunks of unrelated content in a single <a>, making it unclear what the link actually leads to
• Using an <a> purely to trigger JavaScript with no real destination — see the a vs button comparison in Links

Best Practices

• Always include a real, working href
• Keep the clickable area meaningfully scoped to one destination's content
• Use title sparingly — it's not read consistently by screen readers or shown on touch devices, so never rely on it for essential information

Accessibility Considerations

An <a> with a real href is automatically keyboard-focusable and activatable with Enter — a benefit you lose immediately if you rebuild link-like behavior with a <div> or <span> and a click handler instead.

SEO Considerations

Search engines follow href values to discover pages, and read the anchor text as a relevance signal for the destination. A missing or empty href means the link contributes nothing to that discovery process.

Browser & Modern HTML Notes

HTML5 relaxed the older rule that only inline (text-level) content could go inside <a> — block-level content like <div>, <h2>, and <img> are all valid inside an anchor now, enabling the "whole card is clickable" pattern.

Mini Practice

1. Build a link with an href, a title tooltip, and text describing where it goes.
2. Wrap an image and a heading together inside one <a> to make a clickable "card."

Related HTML Notes

• Links (overview)
• link-target
• rel-attribute