Demon Tech Roadmap

HTML

HTML Images

HTML images add visual content to web pages.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML embeds images using the `` tag. This tag is a void element, so it requires no closing tag. The `src` attribute tells the browser where to find the image file.

Syntax

1<!-- basic image syntax -->
2<img src="photo.jpg" alt="A description of the photo">

Example

1<!-- this embeds an image -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Images</title>
8  </head>
9  <body>
10    <img src="/hero.webp" alt="Hero banner" width="1200" height="600">
11  </body>
12</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

The `` tag embeds images.
The `src` attribute defines the file path.
The `alt` attribute provides accessible text.
Dimensions prevent layout shifts.

Up Next

Continue your journey with the next topic.

Go to HTML Favicon ❯