freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 4.2 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Relative URLs and absolute URLs

In this lesson

  • The parts of a URL
  • Absolute URLs
  • Relative and root-relative URLs
  • Using ../ to go up a folder

Short answer

An absolute URL is the full address, with protocol and domain, like https://example.com/about/. A relative URL is a short path from the current page, like about.html. Use absolute URLs for other websites. Use relative or root-relative URLs for pages on your own site, so links keep working if you move or test the site.

Parts of a URL

https://www.example.com/products/pili-tarts.html?size=box#reviews
PartExampleName
https://httpsProtocol or scheme
www.example.comDomain name
/products/pili-tarts.htmlPath
?size=boxQuery string
#reviewsFragment

Absolute URLs

<a href="https://www.phivolcs.dost.gov.ph/">PHIVOLCS volcano updates</a>

Absolute URLs always work, no matter which page they are on. Use them for external links, canonical tags, and Open Graph URLs.

Relative URLs

Imagine this folder:

my-site/
  index.html
  about.html
  products/
    index.html
    pili-tarts.html
  images/
    logo.png
FromToRelative URL
index.htmlabout.htmlabout.html
index.htmlproducts/pili-tarts.htmlproducts/pili-tarts.html
products/pili-tarts.htmlindex.html (home)../index.html
products/pili-tarts.htmlimages/logo.png../images/logo.png

../ means go up one folder. ./ means this folder.

Root-relative URLs

<a href="/products/pili-tarts.html">Pili tarts</a>

A path that starts with / begins at the root of your domain. It works from any page on the site, so many developers prefer it for navigation menus. One catch: when you open files directly from your computer, / points to your hard drive root. Use Live Server or a real host to test root-relative links.

Try it: write the paths

You are on products/pili-tarts.html. Fill in each href so it points to the right file using the folder map above.

Live preview

Quick quiz

1. Which is an absolute URL?
2. What does ../ mean?
3. Where does a root-relative URL start?
4. Which kind should you use for an external site?

Common mistakes

  • Using relative paths for external sites. example.com without https:// is treated as a local file.
  • Hard-coding localhost URLs. Links to localhost break once the site is online.
  • Wrong case in file names. Most web servers treat Logo.png and logo.png as different files.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

URL
Uniform Resource Locator, a web address.
Absolute URL
A full URL with protocol and domain.
Relative URL
A path relative to the current page.
Root-relative URL
A path starting with / from the domain root.
Protocol
The scheme like https:// that starts a URL.
Query string
Parameters after ? in a URL.

Questions beginners ask

Which is better for SEO?

Both work for internal links. Search engines resolve relative URLs. Use absolute URLs for canonical tags.

Why do my links work offline but break online?

Check letter case and folder names. Servers are often case sensitive.

What is a trailing slash?

The / at the end, like /about/. It usually points to a folder's index.html.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.