Overview

HTML Links is part of the complete HTML syllabus. This lesson explains the concept deeply, shows the exact tags or attributes to use, and gives you a runnable browser example for practice.

HTML Links is about choosing markup that carries meaning before styling begins. Good HTML gives the page a reliable structure, makes the content easier to maintain, and gives browsers, search engines, forms, and assistive technologies the information they need.

Core Ideas

• Use HTML Links to improve the meaning of the document, not only the appearance.
• Keep labels, headings, landmarks, and relationships explicit.
• Prefer built-in browser behavior whenever it already solves the job.
• Check that the page still makes sense when CSS and JavaScript are unavailable.

Step by Step

1. Identify the content relationship that HTML Links needs to express.
2. Choose the native element, attribute, or browser API that matches that relationship.
3. Add the smallest useful markup first, then add progressive enhancements.
4. Validate the result with keyboard navigation, browser tools, and source inspection.

Beginner Explanation

HTML Links explains how one page connects to other pages, files, images, scripts, stylesheets, and external resources.

Links use href, images use src, and many resources need alt text, size information, or relationship attributes.

Use clear paths and meaningful link text. Users should know where a link goes before clicking it.

Before You Start

• Know whether HTML Links points to a page, file, image, section, script, stylesheet, or external site.
• Check the folder location so relative paths resolve correctly.
• Write useful text alternatives before adding images or vague links.

Key Tags and Attributes

• a href: creates navigation to another URL or file.
• img src: loads an image resource.
• alt: describes meaningful images and can be empty for decorative ones.
• rel: explains the relationship between the current page and linked resource.

Plain-English Glossary

• href: the destination used by links and some resource references.
• src: the file source used by images, scripts, iframes, and media.
• Alt text: a text alternative for meaningful images.
• Relative path: a file path resolved from the current document location.

What You Will Learn

• Use HTML Links to connect the current document to pages, files, images, anchors, and external resources.
• Choose the right path type: root-relative, document-relative, absolute URL, or fragment link.
• Write link text and alt text that still makes sense out of context.
• Reserve space for images and media to reduce layout movement while loading.

Where You Use This in Real Projects

You use HTML Links whenever a page points to another route, image, download, stylesheet, script, anchor, or external site.

Clear resource markup prevents broken links, missing images, unsafe external navigation, and confusing link text.

When to Use This

• Use HTML Links whenever the page needs to navigate, load, download, embed, or reference another resource.
• Use relative paths for project files and absolute URLs for external destinations.
• Use plain text instead when there is no real destination or resource to load.

Browser and Accessibility Notes

• Broken href and src values are among the easiest HTML problems to miss.
• External links that open a new tab should use rel="noopener noreferrer".
• Images need meaningful alt text unless they are purely decorative.
• Width and height let the browser reserve space before the image finishes loading.

Code Example

<nav aria-label="Lesson navigation">
  <a href="/learn/html">HTML lessons</a>
  <a href="../assets/guide.pdf" download>Download guide</a>
  <a href="https://example.com" rel="noopener noreferrer">External resource</a>
</nav>

Another Example

<article>
  <h2>Recommended resource</h2>
  <a href="/learn/html/html-links">Read the links lesson</a>
  <img src="/images/html-card.png" alt="HTML lesson preview" width="320" height="180">
</article>

Example Explained

• The href attribute points the link to another page.
• The img src points to an image file.
• The alt text explains the image for users who cannot see it.
• Width and height help the browser reserve space before the image loads.

How to Read This Example

1. Start by identifying the resource type in the HTML Links example: link, image, file path, script, stylesheet, or embedded content.
2. Read href and src values carefully. They tell the browser where to go or what to load.
3. Check text alternatives, link text, rel attributes, width, height, and loading behavior.
4. Click the link or inspect the network request to confirm the path resolves correctly.

Checklist

• Use the most specific native element before reaching for a div.
• Check the page with keyboard navigation and browser validation.
• Keep the markup readable before adding CSS or JavaScript.

Common Mistakes

• Using divs for everything and losing built-in semantics.
• Adding JavaScript for behavior the browser already provides.
• Forgetting labels, alt text, lang, viewport, or metadata that other tools rely on.

Do and Don't

• Do: check every href and src used in HTML Links.
• Do: write useful link text and meaningful image alt text.
• Don't: use vague link text like click here when the destination matters.
• Don't: omit rel="noopener noreferrer" for external links that open new tabs.

Practice Challenge

Recreate the HTML Links example in the code editor, then inspect the DOM and check that labels, links, and metadata still make sense without CSS.

Try These Changes

• Change the text in the HTML Links example and run it again.
• Add one new related element, such as another paragraph, list item, table row, input, or link.
• Add a class name and write a small CSS rule for it in the CSS tab.
• Break one tag on purpose, run it, then fix it so you understand how browsers recover from mistakes.

Quick Check

• Question: What is href for? Answer: It is the destination of a link.
• Question: What is alt for? Answer: It describes meaningful images.
• Question: Why add image width and height? Answer: It reduces layout shift while the image loads.

Revision Questions

• Which attributes point to another resource in HTML Links?
• Is each path relative, root-relative, absolute, or a fragment?
• What will users understand from the link text or alt text?
• What should happen if the resource fails to load?

Debugging Checks

• Click every link and check for broken, redirected, or unsafe destinations.
• Inspect image requests and confirm the src path is correct.
• Check that alt text describes meaning, not just the file name.
• Use browser dev tools to see whether relative paths resolve where you expected.

Mini Project

Build a resource card with one internal link, one external link, one download link, and one image. Check every path and make the link text understandable without surrounding context.

Mastery Check

• You can explain why the chosen HTML for HTML Links is more meaningful than a generic div.
• You can identify the keyboard and accessibility behavior provided by the browser.
• You can extend the example without breaking validation.