Links: The a Element
Links are what make the web a web. The "HT" in HTML, HyperText, means exactly this: text that leads somewhere else. One element does all of it, and one attribute decides where it goes.
The rule
a plus href goes somewhere; the link text says where.
A link is an a (anchor) element with an href (hypertext reference):
<a href="https://www.example.org/timetable">Train timetable</a>The value of href decides the destination:
href value |
Goes to |
|---|---|
https://site.example/page |
an absolute URL: a full address, often another site |
about.html or /team/ |
a relative URL: a page on your own site |
#faq |
a place on the same page with id="faq" |
mailto:hello@site.example |
a new email to that address |
tel:+911234567890 |
a phone call, on devices that can make one |
Jumping within a page works by pairing a fragment with an id:
<a href="#faq">Jump to questions</a>
...
<h2 id="faq">Frequently asked questions</h2>target="_blank" opens the link in a new tab. Use it sparingly and say so in the link text, because unexpected tabs disorient people, especially screen reader users. Modern browsers already protect the original page from the new tab, so you no longer need extra attributes for that in most cases.
The link text matters. Screen readers can list every link on a page, stripped of the sentence around it. "Click here", "read more" and "link" become meaningless in that list. Write text that makes sense on its own: "Download the 2026 fee schedule (PDF)".
The shortcut
Build every link in two questions: where does it go, and what will the person get? The first answer is href; the second is the link text.
Where does it go?
A page on the same site, so a relative path from the site root:
href="/help/returns".
The trap is an a without href, or a link whose text only works in context. Both leave keyboard and screen reader users stuck.
Drills
Answer fast — trust the rule.
Which attribute sets where a link goes?
Which href jumps to <section id="prices"> on the same page?
Which link text is the most accessible?
What does <a href="mailto:help@shop.example">Email support</a> do?
A link opens a partner site in a new tab. What should you add?
Remember
a+hrefmakes a link: absolute, relative,#id,mailto:ortel:.- Shortcut:
hrefanswers "where?", link text answers "what will I get?" - Trap: "click here" text, missing
href, and unannounced new tabs.