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

Adding images with the img tag

In this lesson

  • The img tag with src and alt
  • Width and height to prevent layout shift
  • Image formats: JPG, PNG, WebP, SVG
  • Lazy loading, figure, and figcaption

Short answer

Add an image with <img src="photo.jpg" alt="description">. src is the file location and alt describes the image for people who cannot see it. Add width and height so the page does not jump while loading, and loading="lazy" for images further down the page.

The img element

<img src="images/pili-tarts.jpg" alt="A box of twelve golden pili tarts" width="800" height="600">

img is a void element: no closing tag. src means source. alt means alternative text, which you will learn to write well in Lesson 5.3.

Width and height

When a browser knows an image’s size before it downloads, it saves the right space. Without width and height, text jumps down when the image appears. This jump is called layout shift, measured by Google as Cumulative Layout Shift, part of Core Web Vitals.

Use the image’s real pixel size. CSS can still make it responsive with max-width: 100%; height: auto;.

Choosing an image format

FormatBest for
JPGPhotos
PNGGraphics with transparency, screenshots
WebPPhotos and graphics, much smaller files
SVGLogos and icons that stay sharp at any size
GIFShort simple animations (prefer video for long ones)

Compress images before uploading. Free tools like Squoosh can shrink a 3 MB phone photo to under 200 KB. Many visitors use mobile data, so smaller is kinder and faster.

Lazy loading and captions

<figure>
  <img src="images/mayon.webp" alt="Mayon Volcano at sunrise seen from Cagsawa" width="1200" height="800" loading="lazy">
  <figcaption>Mayon at sunrise, taken from Cagsawa Ruins Park.</figcaption>
</figure>

loading="lazy" waits to download images until the visitor scrolls near them. Do not lazy load the main image at the top of the page. <figure> and <figcaption> attach a visible caption to an image.

Try it: add an image

This uses a tiny built-in SVG so it works offline. Add width, height, and alt attributes, then wrap it in figure with a caption.

Live preview

Quick quiz

1. Which attribute points to the image file?
2. Why add width and height?
3. Best format for a logo?
4. Which image should not be lazy loaded?

Common mistakes

  • Uploading huge photos. A 4 MB image slows the page, especially on mobile data.
  • Missing alt. Screen readers may read the file name instead.
  • Lazy loading the hero image. It delays the most important image.
  • Stretching images. Wrong width and height ratios squish the photo.

Your action

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

Key terms

<img>
The void element that embeds an image.
src
The image file location.
alt
Text alternative for an image.
Layout shift
Content moving as the page loads.
Lazy loading
Delaying offscreen images until needed.
WebP
A modern format with small file sizes.
<figure>
A container for an image and its caption.

Questions beginners ask

What is srcset?

srcset lists several sizes of one image so phones download a smaller file. It is a good next step after this course.

Can I use images from Google?

Only if you have permission. Use your own photos or free licensed sites.

What is the picture element?

<picture> lets you offer formats like WebP with a JPG fallback.

Related lessons

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