Links and Navigation
Links are what make the web a “web”. One small element connects your pages to each other and to the rest of the internet.
On this page · 5 min · Beginner
On this page
- Learning objectives
- Explanation
- Syntax
- Code example
- Step by step
- Real-world use
- Common mistakes
- Best practices
- Remember this
- Practice exercise
- Mini quiz
- Related topics
- My notes
- Reading time
- 5 min
- Difficulty
- Beginner
- Updated
- Oct 28, 2026
Related tutorials
Learning objectives#
- Create links with <a href>
- Use absolute, relative and same-page (#) links
- Open links in a new tab safely
- Build an accessible navigation menu
Explanation#
<a href="URL">text</a> creates a link. The text between the tags is what the user clicks, so make it meaningful.
Absolute URL: the full address, like https://google.com. Relative URL: a path from the current page, like about.html or ../images/logo.png. Use relative links inside your own site.
Jump links: href="#contact" scrolls to the element with id="contact" on the same page.
Special links: mailto: opens an email app, tel: dials a phone number on mobiles, and the download attribute downloads a file instead of opening it.
Syntax#
<a href="https://example.com">Absolute link</a>
<a href="about.html">Relative link</a>
<a href="#faq">Jump to FAQ</a>
<a href="mailto:hello@example.com">Email us</a>
Code example: A navigation menu and jump links#
<nav aria-label="Main">
<ul>
<li><a href="#home" aria-current="page">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<h2 id="services">Services</h2>
<p>We build websites.</p>
<h2 id="contact">Contact</h2>
<p>
<a href="mailto:hello@example.com">hello@example.com</a> ·
<a href="tel:+919876543210">+91 98765 43210</a> ·
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN (new tab)</a>
</p>
A menu of three links that jump to sections, plus email, phone and external links.
Step-by-step explanation#
- <nav> wraps the main menu so screen readers can find it.
- Menu links are placed in a <ul> list — a menu is a list of choices.
- aria-current="page" tells assistive technology which page you are on.
- href="#services" scrolls to the element with id="services".
- mailto: and tel: open the email app and phone dialer.
- target="_blank" opens a new tab; rel="noopener" stops the new page from controlling yours.
Real-world use case#
Every site header uses a <nav> with links; long pages such as documentation use jump links for a “On this page” table of contents.
Common mistakes#
Screen-reader users often list all links on a page. Ten links called “click here” are useless. Write “Download the price list” instead.
A link without href, or href="#", used to open a menu is the wrong element. Links navigate; <button> performs actions.
about.html looks in the same folder; /about.html starts from the site root; ../about.html goes up one folder. Mixing these up causes 404 errors.
Best practices#
- Write link text that makes sense out of context
- Use relative links within your site, absolute links to other sites
- Add rel="noopener" whenever you use target="_blank"
- Do not open every link in a new tab — let users choose
Remember this#
a = anchor, href = hypertext reference → “where to go”.
Link goes somewhere; button does something.
# = same page, / = site root, ../ = one folder up.
Practice exercise#
Your task: Build a nav with links to index.html, blog.html and an external GitHub profile that opens in a new tab.
Need a hint?
Show solution
<nav aria-label="Main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="https://github.com" target="_blank" rel="noopener">GitHub</a></li>
</ul>
</nav>
Mini quiz#
Which href scrolls to <section id="pricing"> on the same page?
Want more? Practise all HTML MCQs · HTML interview questions
My notes#
Saved in this browser.