Loading...

HTML Links

URL encoding explained how special characters travel inside an address. This session builds the everyday HTML tool that uses those addresses: the anchor element a with an href. Links are how visitors move between your pages and out to the wider web. Clear destinations and clear clickable text matter as much as correct markup.

What a link is

A hyperlink is a control that navigates somewhere when activated. In HTML, you wrap the clickable content — usually text, sometimes an image — in <a>...</a> and set href to the destination. Without href, you do not have a normal navigational link. The browser styles links by default (often underlined and colored), but the important part is the destination and the wording.

Direct answer

Write <a href="URL">clickable text</a>. The href can be a full web address such as https://www.example.com (absolute) or a path to another file on your site such as about.html (relative). Visitors click the content between the tags. Prefer wording that describes the destination — “About this site” — over empty phrases like “click here.”

Absolute links

Absolute URLs include a scheme (https:// or http://) and usually a host. Use them for external sites, or whenever you truly need a full address that does not depend on the current folder.

Absolute link

html
HTML Code 
<p>
<a href="https://www.example.com">Visit Example</a>
</p>

Reading the absolute sample

  • href holds the full destination starting with https://
  • The words Visit Example are what the user sees and activates
  • Typos in the host or scheme break the trip even if the HTML tags are valid
  • Absolute links still benefit from honest, descriptive text

Relative links on your own site

Relative URLs point to files relative to the current page’s location. They are the everyday way to connect index.html to about.html without repeating your domain name. File Paths skills apply: wrong folders produce quiet 404 failures.

Relative link to another page

html
HTML Code 
<p>
<a href="about.html">About this site</a>
</p>

Relative habits that help

  • Keep related pages in a clear folder structure
  • Prefer hyphenated filenames without spaces
  • Test both directions: home → about and about → home
  • Remember that moving an HTML file without updating relative links breaks navigation

Link text is content, not decoration

Screen reader users often jump through a list of links without hearing the surrounding paragraph. “Click here” and “read more” repeated ten times become meaningless. Name the destination. You can still sound friendly — just be specific.

Descriptive link text

html
HTML Code 
<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>

<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>

Absolute vs relative — pick for the job

  • External site you do not control → absolute https://…
  • Another page in your project → relative path when possible
  • Same-site links written as absolute still work, but relative links stay portable when you rename a domain or open files locally
    Later sessions cover titles on links, bookmarks (#), and email links; master a + href first.

Broken links and 404s

If href points to a missing file or mistyped host, the browser navigates to an error page (often HTTP 404). The HTML around the link may still look perfect. Always verify paths the same way you verified favicon and stylesheet paths: spelling, folders, and whether the target file was saved.

Practice in your editor

  1. Create index.html and about.html in the same folder.
  2. On the home page, add a relative link to about.html with descriptive text.
  3. On the about page, add a relative link back to index.html.
  4. Add one absolute link to an external site you trust.
  5. Follow each link in the browser; then break a relative path on purpose, observe the failure, and fix it.
  6. Rewrite any “click here” text into a destination name.

Easy mistakes

  • Forgetting href so the text is not a real hyperlink
  • Using “click here” or “link” for every destination
  • Broken relative paths after moving files between folders
  • Typos in https:// or the domain for external URLs
  • Putting spaces in filenames and then wondering why relative links fail
  • Nesting interactive content carelessly (keep beginner links simple: text inside a)

Summary

  • Links use the a element with an href destination
  • Absolute URLs include a scheme such as https://
  • Relative URLs point to other files on your site
  • Write clear, descriptive link text for everyone — including assistive tech
  • Broken paths fail at navigation time even when tags look valid

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial