Chapter 6 of 17 · HTML for Beginners — Complete Free Tutorial
Links & Navigation
The anchor element <a> is what makes the web a web. This chapter covers every link type you will build in real projects — from simple pages to mail links, phone links, in-page anchors, and accessible navigation menus.
The basic link
<a href="https://www.thescriptly.in/tutorials">Browse tutorials</a>href(hypertext reference) is the destination.- The link text should describe where the link goes — never "click here".
Absolute vs. relative URLs
| Type | Example | Use when |
|---|---|---|
| Absolute | https://example.com/pricing | Linking to another website |
| Root-relative | /tutorials | Same site, any depth — the safest internal default |
| Document-relative | ../images/logo.png, about.html | Files that move together (rare in real apps) |
Real-life note: Laravel route helpers generate root-relative URLs like /tutorials automatically. Prefer them — they keep working even if you later add a subdirectory or change folder structure.
Types of links
<!-- 1. Internal page link -->
<a href="/tutorials/html-for-beginners">HTML course</a>
<!-- 2. External link: open in a new tab + security hardening -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN</a>
<!-- 3. E-mail link -->
<a href="mailto:hello@thescriptly.in?subject=Course%20question">E-mail us</a>
<!-- 4. Phone link (essential for mobile-first local sites) -->
<a href="tel:+917000907458">+91 7000907458</a>
<!-- 5. Download link -->
<a href="/files/bread-checklist.pdf" download>Download checklist (PDF)</a>
<!-- 6. In-page anchor link -->
<a href="#ingredients">Jump to ingredients</a>About target="_blank"
Always pair it with rel="noopener" (or noopener noreferrer). Without it, the new page can access window.opener and redirect your tab — a known security risk. Modern browsers protect you by default, but the attribute is still best practice.
In-page anchors
Give any element a unique id, then link to it with #id:
<h2 id="ingredients">Ingredients</h2>
...
<a href="#ingredients">Jump to ingredients</a>This powers "table of contents" widgets on long tutorials like this one — great for UX and for Google's sitelinks.
Building a navigation menu
<nav aria-label="Main">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/courses">Programs</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav><nav>tells assistive tech this is a major navigation landmark.aria-current="page"marks the active link for screen readers — style it visually with CSS.
Real-life use case
An e-commerce footer contains all link types at once: phone (tel:), e-mail (mailto:), policy pages (root-relative), social profiles (external + rel="noopener"), and an anchor back to the top of the page.
Common mistakes
- Vague link text ("read more" × 20) — terrible for accessibility and SEO. Describe the destination.
- Using
<button>styled as a link (or vice versa) — links navigate, buttons act. Screen reader users rely on the difference. - Linking to
#as a placeholder — it jumps to top and breaks keyboard navigation. - Forgetting
rel="noopener"on externaltarget="_blank"links.
Best practices
- Keep link text unique and descriptive even when read out of context.
- Never rely on colour alone to show something is a link — underline is the web convention.
- Check for broken links before publishing (see Validation & Debugging).
What's next?
Images are the other half of rich content — learn srcset, alt text craft, and layout-shift prevention in Images & Figures. For grouping content, see Lists.
Frequently Asked Questions
HTML (HyperText Markup Language) is the standard markup language that defines the structure and meaning of every web page. Learning HTML is the fastest way into web development: it is the foundation that CSS, JavaScript, and every framework build upon, and it directly affects SEO and accessibility.
Most beginners can build their first complete page in a day and become comfortable with the core tags within 1–2 weeks of daily practice. This 17-chapter series is designed to be completed in about 2–3 weeks at a relaxed pace, faster if you type out every example.
Only a plain text editor (VS Code is free and popular) and a web browser. No installation, no setup, no account — create a file called index.html, double-click it, and it opens in your browser.
HTML5 is the current generation of the HTML standard (published as the living standard by WHATWG). When people say "HTML5" they usually mean modern HTML: semantic elements like header, nav and article, native audio/video, canvas, and improved form input types — all covered in this tutorial.
No. HTML is a markup language — it describes content and structure but has no variables, loops, or conditionals. Those come with programming languages like JavaScript, which you would learn after HTML and CSS.
Right here: every chapter includes examples you can retype in your own index.html file, plus practice challenges. After this series, build small projects — a portfolio page, a recipe page, or a landing page for a local business — they exercise the same tags in real contexts.
Search engines crawl HTML first. Unique titles, a single clear h1, a logical heading hierarchy, descriptive alt text, valid markup, fast-loading responsive images, and a proper internal linking structure all come straight from HTML — see the HTML & SEO chapter for the full checklist.
Accessible HTML makes your site usable by everyone, including people who rely on screen readers or keyboards, and it is a legal requirement in many countries. The good news: proper labels, semantic elements, alt text, and keyboard-operable controls are mostly free HTML habits.
No — there are roughly 100 meaningful tags and you will naturally use about 30 of them regularly. Focus on understanding purpose and structure; editors and references (like MDN) handle the rest. This tutorial covers every tag beginners actually need.
CSS for visual design and layout, then JavaScript for interactivity, then a version control system (Git). With those three you can build complete websites; frameworks like React or Laravel Blade come after the fundamentals feel natural.