Anatomy of a link
A link is an anchor — the <a> tag. The destination goes in
the href attribute (“hypertext reference”). The text between the tags is what
the user clicks.
Visit the MDN web docs to learn more.
<a href="https://developer.mozilla.org">MDN web docs</a> <!-- ↑ destination (href) ↑ link text -->
Absolute vs. relative links
An absolute link is the full address including https:// — use it for
other websites. A relative link is the path from the current page — use it for your
own pages and files so they keep working when you publish.
Absolute
<a href="https://www.example.com/index.html">Visit Site</a>
Relative
<a href="page2.html">Go to Page 2</a> <a href="images/logo.png">View Logo</a>
File paths
A file path tells the browser where a file lives, starting from the page with the link. These four patterns cover almost everything.
| Situation | Syntax | Example |
|---|---|---|
| Same folder | Just the filename | about.html |
| A subfolder | Folder + slash + file | pages/about.html |
| Parent folder (up one) | Two dots + slash + file | ../index.html |
| A different website | Full URL | https://example.com |
about.html works on any server; About Me.html can break once hosted online.Basic links
Link to a page
<a href="about.html">About</a>
Jump to a section on the same page
Give a target element an id, then link to #id. (Try it — this jumps to the top of the page.)
<h2 id="contact">Contact</h2> <a href="#contact">Jump to Contact</a>
about.html#team.Add a hover tooltip (ScreenTip)
<a href="syllabus.html" title="Opens the full course syllabus">Syllabus</a>
Important link attributes
Beyond href, these attributes control how a link behaves.
| Attribute | What it does |
|---|---|
target="_blank" | Opens the link in a new tab. Use for external sites so visitors don't leave yours. (Default is the same tab.) |
rel="noopener" | A security best practice — always pair it with target="_blank". |
title="…" | Shows a hover tooltip. Extra context only — not a substitute for clear link text. |
download | Forces the file to download instead of opening (PDFs, ZIPs, images). |
<a href="https://example.com" target="_blank" rel="noopener">Visit the site</a> <a href="syllabus.pdf" download>Download the syllabus (PDF)</a>
Email, phone, text & downloads
Start an email (mailto:)
<a href="mailto:help@example.com?subject=Customer%20Query">Email Support</a>
Spaces in the subject become %20 — URLs can't contain plain spaces.
Pre-fill the subject and the message body
Add more fields by joining them with &. Use body= to pre-write the message.
<a href="mailto:jgilliam@nvcc.edu?subject=Student%20Question&body=Hello%20Dr.%20G,"> Email Instructor </a> <!-- first field uses ? , every field after it uses & -->
Start a phone call (tel:)
<a href="tel:+17034250808">Call (703) 425-0808</a>
The href must be digits only (with a + and country code); the visible text can use parentheses and dashes.
Send a text message (sms:)
<a href="sms:+17034250808">Text (703) 425-0808</a>
Just like tel:, the number is digits only with a + and country code. On a phone this opens the messaging app with that number ready to text.
Pre-fill the text message (sms: with body)
Add ?body= to start the message with text already written — spaces become %20.
<a href="sms:+17034250808?body=Hi%20Dr.%20G,%20I%20have%20a%20question"> Text a question </a>
Download a file
<a href="downloads/template.zip" download>Download Project Template</a>
Image links
Wrap an <img> in an <a> to make the whole image a link.
<a href="gallery.html"> <img src="images/thumb.jpg" alt="View the gallery"> </a>
Write good link text
Link text should make sense out of context. Screen-reader users often pull up a list of just the links — if every one says “click here,” that list is useless.
| Bad — avoid | Good — use |
|---|---|
| For our hours, click here. | View our store hours. |
| Read more here. | Read more about keyboard types. |
| Download this. | Download the 2026 catalog (PDF). |
Audio & video
The <audio> and <video> elements play media natively — add controls to show the play/pause UI. The text inside is a fallback for old browsers.
First, the simplest option — link to the file
You don't have to embed a player. A plain <a> link to a sound or video file lets visitors open or download it — just like linking to a PDF.
<a href="audio/song.wav">Listen to my song (MP3)</a> <a href="media/sample-video.mp4">View Sample Video (MP4)</a>
Better — embed a player so it plays in the page
A real audio player:
A real video player:
<audio src="media/clip.mp3" controls> Your browser cannot play this audio. </audio> <video src="intro.mp4" controls width="90%"> Your browser cannot play this video. </video>
<track kind="captions"> element inside the <video>.Embed a YouTube video
An <iframe> drops another page — like a YouTube player — into yours. Use the /embed/ URL and the video's ID.
<iframe src="https://www.youtube.com/embed/PZG1NWiMBjs"
width="560" height="315"
title="Lesson video: creating links in HTML"
frameborder="0" allowfullscreen></iframe>
v= in a normal YouTube URL. In youtube.com/watch?v=PZG1NWiMBjs, the ID is PZG1NWiMBjs. Always add a title for accessibility. Note: if an embed shows an error, that video's owner has disabled embedding — pick a different video.Summary
The <a> tag plus href links to pages, jumps to #id sections,
starts emails with mailto:, calls with tel:, texts with sms:, and downloads files with
download. target, rel, and title control behavior,
and clear link text keeps it accessible. Bring in media with <audio>,
<video>, and <iframe> — and choose relative links for your own
files, absolute links for other sites.