Learning HTML - Basic Images and Media

#Introduction

Images bring a page to life. Episode 6 covers basic images and media — how to insert images with img, write alternative text with alt, wrap images with captions using figure and figcaption, and apply lightweight image loading strategies.

The key of this episode isn't the tag itself, but the often-underrated alt attribute. Good alt text determines whether an image can be understood by blind users, search engines, and when the image fails to load.

#The img Element

#src and Supporting Attributes

Images are inserted with img, a void element that carries the src attribute for the image source:

Attributes used:

src: the image path or URL.
alt: alternative text that describes the image.
width and height: dimensions in pixels, preventing layout jumps when the image loads.

width and height should match the image's native dimensions so the aspect ratio stays correct and the page doesn't shift when the image appears.

#Writing Correct Alt Text

The golden rule for alt: write a description that represents the image's function in the page context.

Informative images: describe the content, like alt="Kopi tubruk di atas meja kayu".
Purely decorative images: alt="" (empty) so screen readers skip them.
A logo with a name: use the name text, like alt="Kafe Kopi Nusantara".
An image button: use the button's action, like alt="Kirim formulir".

Don't write alt="foto.jpg" or alt="gambar" — neither conveys any information.

#figure and figcaption

#Associating a Caption

When an image needs a caption, wrap it in figure and add a figcaption:

figure marks self-contained content — images, diagrams, code snippets — and figcaption provides the caption. This caption differs from alt: alt is read in place of the image, while figcaption appears as part of the page for everyone.

#Lightweight Image Loading

#loading="lazy" and decoding="async"

Images below the fold don't need to load when the page first opens. The loading="lazy" attribute delays loading until the image nears the viewport:

Add decoding="async" so the browser doesn't delay rendering text while decoding the image. Above-the-fold hero images should still load directly — don't give them lazy — so the page feels fast.

#Checking Image Size

Before using an image, check its size and format from the terminal:

Check the image file type

file foto/profil.jpg

The output of file foto/profil.jpg shows the format like JPEG, the dimensions, and color depth. Get used to checking dimensions so the width and height you write match the actual file.

#Exercise: A Small Gallery

Build a simple gallery combining figure and figcaption:

Make sure the foto folder contains two image files. Open the page through the local server with python3 -m http.server 8080, then check in the DevTools Network panel that the second image only loads when you scroll down.

#Common Mistakes and Solutions

#Images That Don't Load

Broken images are usually caused by a wrong src path. Verify that the file is in the correct folder relative to the page. Relative paths are computed from the location of the HTML file, not from the project folder.

#Overly Long Alt Text

Writing a long paragraph in alt makes screen reader users hear a tedious description. Keep it short and dense; extra details can go in figcaption.

#Closing

Episode 6 makes your pages visual: img with src and dimensions, correct alt, figure with figcaption for captions, and loading="lazy" to keep loading light.

Key takeaways:

img always needs src; write an alt that represents the image's function.
Decorative images use alt=""; informative images use a short description.
width and height prevent layout jumps when images load.
figure and figcaption for captioned images.
Below-the-fold images use loading="lazy" and decoding="async".

In the next episode, episode 7, we'll cover semantic elements and structural meaning — header, footer, main, section, and article. You'll leave the div soup habit behind and start building meaningful structure.