The anchor Element and href Attribute
Create links with the anchor tag and href attribute.
The anchor Element and href Attribute is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a Link?
The <a> (anchor) element creates a hyperlink — the fundamental building block of the web.
- Users click links to navigate between pages
- Links connect documents, resources, and locations
- Without links, the web would be a collection of isolated pages
The href Attribute
The href (hypertext reference) attribute specifies where the link goes:
<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>
<a href="../contact.html">Contact</a>
<!-- href = destination URL or path
Content between tags = clickable text -->
<!-- Without href, a is still valid but not a hyperlink -->Link Text Matters
The text between <a> tags (the link text) should describe the destination:
<!-- Bad: uninformative -->
<a href="/docs/guide">Click here</a>
<a href="/docs/guide">Read more</a>
<!-- Good: descriptive -->
<a href="/docs/guide">Read the Getting Started Guide</a>
<!-- Screen readers list all links — "click here" is meaningless out of context -->Types of href Values
The href can contain different types of values:
<a href="https://example.com">External URL</a>
<a href="/page">Root-relative path</a>
<a href="page.html">Relative path</a>
<a href="#section">Fragment (same page)</a>
<a href="mailto:hi@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="javascript:void(0)">JS (avoid this)</a>Linking to Email and Phone
Special URI schemes create email and phone links:
<a href="mailto:support@example.com">Email Support</a>
<a href="mailto:support@example.com?subject=Hello&body=Hi%20there">
Email with Subject
</a>
<a href="tel:+15555551234">Call Us: (555) 555-1234</a>
<!-- Tapping tel: links on mobile opens the phone dialer -->The title Attribute on Links
Add a tooltip with the title attribute:
<a href="/glossary" title="View the full HTML glossary">Glossary</a>
<!-- title appears as a tooltip on hover
But: not accessible via keyboard or touch — never rely on title alone for critical info -->Styling Links
Browsers apply default link styles you should maintain for accessibility:
/* Default link states */
a:link { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover { color: red; }
a:focus { outline: 2px solid blue; } /* keyboard focus */
a:active { color: red; }
/* Never remove :focus outline — keyboard users need it */Active vs Current Links
Use aria-current for the current navigation link:
<nav>
<a href="/">Home</a>
<a href="/about" aria-current="page">About</a>
<a href="/contact">Contact</a>
</nav>
<!-- aria-current="page" tells screen readers this link is the current page -->
<!-- CSS: [aria-current="page"] { font-weight: bold; } -->Anchor Without href
An <a> without href is a placeholder link — not interactive:
<a>Not a link yet</a>
<!-- No href = no hyperlink, no default pointer cursor, not keyboard-focusable -->
<!-- If you need a clickable element without navigation, use button:
<button onclick="doSomething()">Click Me</button> -->Wrapping Block Elements
In HTML5, <a> can wrap block elements — making entire sections clickable:
<a href="/products/widget">
<div class="card">
<h2>Widget Pro</h2>
<p>The best widget available.</p>
<img src="widget.jpg" alt="Widget Pro product image">
</div>
</a>
<!-- Valid in HTML5 (not in HTML4) -->
<!-- Ensure the link text is still descriptive for screen readers -->Link Focus and Keyboard Access
Links must be keyboard accessible:
- Users tab through links with the Tab key
- They activate links with Enter
- Never remove the focus outline from links
- The tab order should follow reading order
Quick Check
What makes a link text accessible for screen reader users?
Recap: Anchor Element
Key link concepts:
<a href="url">creates a hyperlink- Link text must describe the destination
- Supports external URLs, relative paths, fragments, mailto:, tel:
- HTML5 allows wrapping block elements in
<a> - Never remove the :focus outline
- Use
aria-current="page"for current navigation items
Frequently asked questions
Is the “The anchor Element and href Attribute” lesson free?
Yes — the full text of “The anchor Element and href Attribute” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “The anchor Element and href Attribute”?
Create links with the anchor tag and href attribute. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The anchor Element and href Attribute” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The anchor Element and href Attribute
- Absolute vs Relative URLs
- Opening Links in New Tabs and Download Attribute
- Linking to Sections Fragment Identifiers