Coding/Learn/html/images
HTML Beginner Course
01.Introduction to HTML
02.Anatomy of an HTML Element
03.The Sacred HTML5 Skeleton
04.Headings (h1 to h6)
05.Paragraphs, Line Breaks & Dividers
06.Text Formatting & Emphasis
07.Hyperlinks & Navigation (<a>)
08.Images & The Sacred Alt Text (<img>)
09.Ordered & Unordered Lists (<ul>, <ol>, <li>)
10.Block vs Inline Elements
11.Generic Containers (<div> & <span>)
12.Semantic HTML (<header>, <nav>, <main>, <footer>)
13.Tables (<table>, <tr>, <th>, <td>)
14.Native Audio & Video Elements
15.The Invisible Brain (<head> & Meta Tags)
16.Interactive Forms (<form>)
17.Input Types (<input>)
18.Accessible Labels & Submit Buttons
19.Textareas & Select Dropdowns (<textarea>, <select>)
20.Capstone: Building Your First Web Profile Page
Course Certificate0%

Complete all lessons to earn

LearnImages & The Sacred Alt Text (<img>)
8 / 20 0%
Lesson 08 of 20
5 mins read

Images & The Sacred Alt Text (<img>)

PreviousNext Lesson
In Plain English

The <img> tag embeds pictures into your webpage. It is a self-closing void tag that requires two vital attributes: src (the image path or URL) and alt (alternative text description for accessibility and broken links).

The Mental Model

"Imagine ordering a frame online. The src is the delivery tracking number of the photo. The alt text is the voice memo describing what the photo depicts if the delivery truck breaks down."

Deep Dive: How It Works

src attribute: The source file location (URL like "https://example.com/photo.jpg" or local file "./avatar.png").

alt attribute: Critical for blind and visually impaired users who use screen readers. If an image fails to load, the alt text displays on screen.

Dimensions: You can control width and height attributes in pixels: <img src="..." width="300" height="200" alt="...">.

Syntax Blueprint

<img src="cat.jpg" alt="A fluffy orange cat sleeping on a keyboard" width="400">

Void tag with image source path and descriptive alternative text.

PointCore Rules to Remember

Point star
Always Include Alt Text: Omitting alt text is an accessibility sin and harms your Google search ranking.
Point star
Self-Closing Tag: Images do not hold text content, so they never have a closing </img>.
Point star
Aspect Ratio: Specifying width and height prevents annoying page layout shifts during loading.

Common Beginner Traps & How to Fix Them

Mistake:Writing alt="image" or alt="photo"

Why it happens: Being lazy with descriptions.

How to fix: Describe what the image actually depicts so someone who cannot see it understands.

Pro Tip: For purely decorative icons that have no meaning, use an empty alt="" so screen readers gracefully skip them.

Live Interactive Example

Hit Run Code to see it live
Embedding an Image with Alt Text
HTML5
1
2
3
4
5
Live Browser Preview
Click "Preview / Apply" to view the rendered output.
How it works: The browser loads the image and attaches the accessibility description.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create an image tag with src and alt

  • PointWrite an <img> tag with src="logo.png" and alt="ZenCompiler Logo"
1
2
Browser Preview & Output
Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

PreviousNext Lesson
Overview100 SheetLearnCertificates