Learning HTML - Link and Navigation Elements
This episode breaks down link elements: the href attribute for absolute and relative URLs, fragment anchors to in-page sections, target and rel for opening new tabs, and navigation patterns with aria-current.
#Introduction
Links are what make the web a web. Without the a element, every page stands alone. Episode 5 covers link and navigation elements — how to connect pages, open links in new tabs, jump to sections within the same page, and build accessible navigation.
You'll also learn a security habit that's often overlooked: the correct combination of target and rel when opening a new tab. This small detail matters for the security and privacy of users.
#Anatomy of a Link Element
#a and href
Links are written with the a element (anchor) and the href attribute that holds the destination:
<a href="https://developer.mozilla.org">MDN Web Docs</a>The text between the opening and closing tags is the visible link text. This text should be descriptive — instead of "click here", write "MDN documentation for HTML". Descriptive text helps screen readers and SEO.
#Types of href
#Absolute and Relative URLs
href can hold two kinds of addresses:
- Absolute: a full URL with protocol, like
https://example.com/halaman. Used to go to other sites. - Relative: a path from the current page, like
tentang.htmlor../beranda.html. Used to reach pages on the same site.
<a href="https://example.com">Situs eksternal</a>
<a href="/panduan.html">Halaman di root situs</a>
<a href="../beranda.html">Halaman di folder induk</a>Relative paths are more flexible because they don't depend on a domain — the page keeps working even if moved to another domain.
#Fragment Anchors
A fragment is marked with a # sign followed by the destination element's id. Clicking the link jumps to that element:
<a href="#bagian-daftar">Lompat ke daftar</a>
<h2 id="bagian-daftar">Daftar Belanja</h2>
<ul>
<li>Beras</li>
<li>Minyak goreng</li>
</ul>An id value must be unique within a page. Fragments can also be combined with paths, for example panduan.html#instalasi.
#mailto and tel
Two special schemes for actions, not navigation:
<a href="mailto:halo@contoh.id">Kirim email</a>
<a href="tel:+6281234567890">Hubungi kami</a>mailto opens the email app with the address pre-filled; tel calls the number on mobile devices.
#target and rel
#Opening a New Tab Safely
The target="_blank" attribute opens the link in a new tab. However, without rel, the new page can access the original page's window.opener object — a security hole called reverse tabnabbing.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Buka di tab baru
</a>The combination rel="noopener noreferrer" severs window.opener access and prevents the browser from sending referrer information. Get used to always adding both whenever you use target="_blank".
#Other Useful rel Values
rel="nofollow"tells search engines not to follow the link.rel="external"marks a link to an external site.
#Accessible Navigation
#Building the nav Element
For a page's main group of links, use the nav element. The most common pattern: a ul containing links, wrapped in nav.
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/beranda">Beranda</a></li>
<li><a href="/tentang">Tentang</a></li>
<li><a href="/kontak">Kontak</a></li>
</ul>
</nav>The nav element marks a navigation block so screen readers can jump straight to the menu. We'll deepen the nav details and good navigation structure for SEO in episode 12.
#Marking the Active Page
When marking the currently active page, use aria-current="page":
<a href="/beranda" aria-current="page">Beranda</a>The attribute aria-current="page" tells screen readers that this link points to the page currently being viewed — even without a visual marker, users navigating via screen readers still know their position.
#Exercise: Connecting Pages
Create two pages that link to each other. In index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beranda</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/index.html" aria-current="page">Beranda</a></li>
<li><a href="/tentang.html">Tentang</a></li>
</ul>
</nav>
<h1>Selamat Datang</h1>
<p>Ini halaman beranda. Kunjungi <a href="/tentang.html">halaman tentang</a> untuk tahu lebih lanjut.</p>
<p><a href="#kontak">Lompat ke kontak</a></p>
<h2 id="kontak">Kontak</h2>
<p>Email: <a href="mailto:halo@contoh.id">halo@contoh.id</a></p>
</body>
</html>Open it through the local server, then use the links to move between pages. You can also verify from the terminal with curl -s http://localhost:8080/tentang.html to make sure the second page is available.
#Common Mistakes and Solutions
#target=_blank Without rel
Always pair rel="noopener noreferrer" when opening a new tab. Without it, the destination page has access to your page's window.opener.
#Non-Descriptive Link Text
Text like "click here" doesn't explain the destination. Use text that states the destination, so screen reader users scanning a list of links still understand.
#Closing
Episode 5 connects your pages to each other: absolute and relative links, fragments for in-page jumps, mailto and tel, plus safe and accessible navigation with target, rel, and aria-current.
Key takeaways:
awithhrefis how you create links; write descriptive link text.#idto jump to a page section;idvalues must be unique.target="_blank"must be paired withrel="noopener noreferrer".mailto:andtel:open email and calling apps.- Use
aria-current="page"to mark the active link.
In the next episode, episode 6, we'll cover basic images and media — the img element with alt, figure and figcaption, plus loading="lazy" strategies for images. Your pages will start gaining visual appeal.