freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 5.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

Image paths and file locations

This lesson covers

  • Organizing an images folder
  • Relative and absolute src paths
  • Naming image files
  • Troubleshooting broken images

Short answer

The src of an image follows the same rules as link URLs. A relative path like images/logo.png starts from the current HTML file. A root-relative path like /images/logo.png starts from the site root. Most broken images come from a wrong folder, a typo, or uppercase letters that do not match.

Organize your images

my-site/
  index.html
  about/
    index.html
  images/
    logo.svg
    team/
      ana-reyes.webp

Keep images in one images folder, with subfolders for groups. It makes paths predictable.

Writing src paths

HTML fileImagesrc
index.htmlimages/logo.svgimages/logo.svg
about/index.htmlimages/logo.svg../images/logo.svg
Any pageimages/logo.svg/images/logo.svg
Any page, image on a CDNhttps://cdn.example.com/logo.svg

Name image files well

  • Lowercase letters only.
  • Hyphens between words, no spaces.
  • Describe the image: pili-tarts-box.jpg, not IMG_20260315_0912.jpg.
  • Keep the extension correct: .jpg, .png, .webp, .svg.

Descriptive file names help you find files, and Google Images uses them as a small hint about the image.

Troubleshooting a broken image

  1. Right click the broken icon and choose Open image in new tab. Read the URL the browser tried.
  2. Check the folder exists and the file is there.
  3. Compare spelling and capital letters: Logo.PNG is not logo.png on most servers.
  4. Check the extension. A file saved as .jpeg will not load from .jpg.
  5. Open DevTools (F12), go to the Network tab, and look for red 404 errors.

Try it: spot the broken path

Three images are broken because of path or name mistakes. Read each src and fix it. Hint: compare with the file names listed in the comment.

Live preview

Quick quiz

1. From about/index.html, which src reaches images/logo.svg?
2. Which file name is best?
3. Logo.PNG vs logo.png on a Linux server?
4. Which DevTools tab shows 404 image errors?

Common mistakes

  • Linking to files on your computer. src=“C:\Users\…” only works on your own laptop.
  • Hotlinking other sites’ images. Their image may vanish, and it uses their bandwidth.
  • Camera file names. IMG_1234 says nothing about the image.

Your action

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

Key terms

Image path
The location written in an img src.
Hotlinking
Embedding an image hosted on someone else's site.
404 error
The server message when a file is not found.
DevTools
Browser tools for inspecting pages, opened with F12.
CDN
Content Delivery Network that serves files from servers near the visitor.

Questions beginners ask

Why does my image work locally but not online?

Usually letter case or a missing upload. Check both.

Should I use absolute paths for images?

Root-relative paths are fine on your own site. Use absolute URLs for images on another domain or CDN.

Can I put images in the same folder as HTML?

Yes, but a separate folder keeps bigger sites tidy.

Related lessons

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