HTMLmarkup~20 mins

Absolute vs relative URLs in HTML - Hands-On Comparison

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding Absolute vs Relative URLs in HTML

📖 Scenario: You are creating a simple webpage for a local bakery. You want to add links to the homepage and to an external website for online orders.

🎯 Goal: Build a basic HTML page with two links: one using a relative URL to the homepage and one using an absolute URL to an external site.

📋 What You'll Learn

Use a relative URL for the link to the homepage

Use an absolute URL for the link to the external online order site

Use semantic HTML5 structure

Include a descriptive title attribute for each link for accessibility

💡 Why This Matters

🌍 Real World

Websites often link to pages within the same site using relative URLs and to other websites using absolute URLs. Understanding this helps keep links working correctly when moving files or deploying sites.

💼 Career

Web developers must know how to write correct URLs in HTML to build reliable navigation and connect to external resources, which is essential for creating professional websites.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en" in the <html> tag, and include <head> with <meta charset="UTF-8"> and <title>Bakery Website</title>. Add an empty <body> section.

HTML




    
    Bakery Website

Need a hint?

Remember to include the lang attribute in the <html> tag and the charset meta tag inside <head>.

Add a relative URL link to the homepage

Inside the <body>, add a link with the text Home that uses a relative URL index.html. Add a title attribute with the text Go to homepage.

HTML




    
    Bakery Website

Need a hint?

Use the <a> tag with href="index.html" and add a title attribute.

Add an absolute URL link to the online order site

Below the homepage link, add another link with the text Order Online that uses the absolute URL https://www.bakeryorders.com. Add a title attribute with the text Order bakery items online.

HTML




    
    Bakery Website


    Home

Need a hint?

Use the full URL starting with https:// in the href attribute.

Add a navigation section and improve accessibility

Wrap both links inside a <nav> element. Add an aria-label="Main navigation" attribute to the <nav> for screen readers.

HTML




    
    Bakery Website

Need a hint?

Use the <nav> tag and add the aria-label attribute for accessibility.