Topic 1.6
Links
In one line
The <a> element with an href makes a link: to another site (absolute URL), another file on your site (relative path), a spot on the same page (#id), an email or phone number, or a file to download.
Think of it like this
Signposts. A sign can point to another city with its full address (an absolute URL), to the next street ("turn left", a relative path that only makes sense from where you stand), or to a room in this building ("Room 4, upstairs", a fragment on the same page). Links are the signposts of the web; the "H" in HTML (HyperText) means text with links.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- Link (anchor)
- An
<a>element with anhref: something you click to go somewhere. - href
- The attribute that holds the link's destination.
- Link text
- The words between
<a>and</a>: what people click and what screen readers read. - Absolute URL
- A full address with protocol and domain, like
https://hectal.in/html. - Relative URL
- A path worked out from the current page's location, like
about.htmlor../index.html. - Fragment
- The
#somethingpart of a URL that jumps to the element with thatid. - Origin
- The protocol, domain and port of a URL together, like
https://hectal.in. - noopener
- A
relvalue that stops a newly opened tab from controlling the page that opened it.
Step by step
01Link to another website
Other sites need a full, absolute URL. Without https://, the browser treats it as a file on your site.
<a href="https://developer.mozilla.org/">MDN Web Docs</a>02Link to your own pages
Pages in the same project use relative paths, so the links keep working when you move the whole folder or put it online.
<a href="about.html">About me</a>
<a href="blog/first-post.html">My first post</a>03Go up a folder
From blog/first-post.html, the home page is one folder up, so the path starts with ../.
<a href="../index.html">Back to home</a>04Jump within a page
Give the target an id, then link to it with # and that id. Clicking scrolls there and updates the address bar, so the spot can be bookmarked and shared.
<a href="#contact">Contact</a>
...
<h2 id="contact">Contact</h2>05Email, phone and download
The scheme decides what happens: mailto: opens email, tel: dials, and download saves the file.
<a href="mailto:hello@example.com?subject=Hello">Email me</a>
<a href="tel:+919876543210">Call +91 98765 43210</a>
<a href="files/cv.pdf" download="Asha-CV.pdf">Download my CV</a>06Open an external link in a new tab, safely
If you must open a new tab, add rel="noopener" and say so in the link text, so nobody is surprised.
<a href="https://example.com" target="_blank" rel="noopener">Example (opens in a new tab)</a>Try it yourself
- 1
Add a section and a link to it
In the first example, add
<h2 id="faq">FAQ</h2>at the bottom and a matching link in the nav. Predict what the console prints for it, then run. - 2
Resolve your own paths
In the second example, add
"../../../x.html"to the list. Predict: can a path go higher than the top of the site? Run and see what the browser does. - 3
Add an email subject
Change the email link so the subject is
Question about HTML. Spaces in a URL must be written as%20. Check your link by clicking it in a real page on your computer.
Code & diagrams
Click the links in the preview: the preview tells you where they would go instead of leaving the page.
Preview
Console
Nothing logged yet.Expected console output
fragment #about
fragment #contact
absolute https://developer.mozilla.org/
relative blog/first-post.html
email mailto:hello@example.com?subject=Hello
phone tel:+919876543210
absolute https://example.com`new URL(link, page)` does exactly what the browser does when you click a relative link.
Preview
Console
Nothing logged yet.Expected console output
next.html → https://example.com/blog/2026/next.html
images/cat.png → https://example.com/blog/2026/images/cat.png
../index.html → https://example.com/blog/index.html
../../about.html → https://example.com/about.html
/contact.html → https://example.com/contact.html
#comments → https://example.com/blog/2026/post.html#comments
?page=2 → https://example.com/blog/2026/post.html?page=2A `data:` URL holds the file's contents inside the link itself, so `download` works for it. The preview is sandboxed and may block the actual save.
Preview
Console
Nothing logged yet.Expected console output
download name: hello.txt
href starts with: data:text/plainBreak it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Forget the protocol
Write <a href="www.google.com">Google</a> on a page at https://example.com/blog/.
Break #2
Link to an id that doesn't exist
Write <a href="#Contact"> but the heading is <h2 id="contact">.
Break #3
Write "click here" links
Write For prices, <a href="prices.html">click here</a>.
Myth vs fact
Myth
href="#" is a good way to make a clickable thing that runs JavaScript.
Fact
That's a link that goes nowhere and jumps to the top. For an action, use <button>. Use <a> only when it goes somewhere (Topic 4.6).
Myth
Every target="_blank" link is a security hole.
Fact
All current major browsers treat target="_blank" as noopener by default. Adding rel="noopener" is still harmless and helps older browsers.
Myth
download lets you download any file from any website.
Fact
Browsers ignore download for cross-origin URLs (other websites); it only applies to same-origin, data: and blob: URLs.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
An
<a>withouthrefis a placeholder link: it isn't focusable with the keyboard and isn't announced as a link. A link withhrefis in the tab order and activates with Enter (a button activates with Enter and Space). - ▸
The
relattribute describes the relationship to the target:noopener,noreferrer,nofollow(don't pass search ranking),sponsoredandugc(user-generated content) for paid and user links,external, andmefor profile verification. - ▸
Fragment navigation scrolls the target to the top of the viewport. With a fixed header covering it, use CSS
scroll-margin-topon the target;scroll-behavior: smoothanimates the jump. The:targetCSS pseudo-class styles the element currently jumped to. - ▸
Every click on a same-site link normally loads a whole new page. Frameworks like Next.js intercept clicks to fetch only what changed, and the newer cross-document View Transitions feature can animate between plain HTML pages.
Remember this
- 1
A link is an
<a>(anchor) element with anhref(hypertext reference) attribute saying where it goes:<a href="https://hectal.in">Hectal</a>. The content between the tags is the link text: what people see and click, and what screen readers read. Make it describe the destination ("Read the pricing guide"), never "click here", because screen reader users often browse a list of link texts on their own. - 2
An absolute URL includes the protocol and domain:
https://developer.mozilla.org/en-US/. Use it for other websites. A relative URL is a path worked out from the current page's location:about.htmlmeans "the fileabout.htmlin the same folder as this page";blog/post.htmlgoes into a sub-folder;../index.htmlgoes up one folder (..means the parent folder);/contact.htmlstarting with/is root-relative, measured from the top of the site. Topic 1.8 goes deeper. - 3
A fragment link starts with
#and jumps to the element whoseidmatches, on the same page:<a href="#faq">FAQ</a>scrolls to<h2 id="faq">. You can combine them:guide.html#installopens another page and jumps to a spot in it.href="#"alone goes to the top of the page. Anidmust be unique on the page. - 4
Special schemes start other apps.
mailto:hello@example.comopens the visitor's email app with the address filled in (you can add?subject=Hi).tel:+919876543210offers to call that number, mostly useful on phones; write the number in international format without spaces. - 5
target="_blank"opens the link in a new tab. A page opened this way used to get a handle (window.opener) back to your page and could redirect it to a fake login page, an attack called reverse tabnabbing. Addingrel="noopener"cuts that handle. Modern browsers now applynoopenertotarget="_blank"automatically, but writingrel="noopener"is still a common habit for older browsers.rel="noreferrer"also hides which page the visitor came from. Open new tabs sparingly: people expect links to stay in the same tab, and they can choose a new tab themselves. - 6
The
downloadattribute tells the browser to save the linked file instead of opening it:<a href="report.pdf" download>. A value renames it:download="2026-report.pdf". It only works for files on the same site (same origin: same protocol, domain and port) or fordata:andblob:URLs; for other sites the browser ignores it and opens the link normally.
Explain it without notes
What is the difference between an absolute and a relative URL, and when do you use each?
What does ../ mean in a path?
Why did target="_blank" need rel="noopener", and is it still needed?
Why is "click here" bad link text?
Practice
Write a small menu (a <ul> of links) for a site with index.html, about.html and contact.html in the same folder.
You are on docs/guide/install.html. Write links to docs/guide/usage.html, docs/index.html and index.html at the site root (use relative paths, no leading /).
Write a link that opens MDN in a new tab safely and tells the user it will open a new tab.
Trade-offs
- ↔
Relative links keep a site portable between your computer, a test server and the live domain; absolute links to your own site break when the domain changes but are needed in emails and RSS feeds, which have no page to resolve against.
- ↔
New tabs keep visitors' place on your site but take control away from them and can confuse screen reader and mobile users; default to the same tab.
Done when you can
I can link to other sites with absolute URLs and to my own pages with relative paths.
I can use
../and/paths correctly.I can link to a spot on a page with
#id.I can write
mailto:andtel:links and adownloadlink.I can open a new tab safely with
rel="noopener"and know when not to.I write link text that describes the destination.