Step 2: Add the src attribute with the image URL and the alt attribute with a short description. The tag is self-closing: <img src="..." alt="...">.

<img src="/photo.jpg" alt="Photo">

Step 3: The browser loads the image from src and shows the alt text if the image fails or for screen readers.

<img src="/photo.jpg" alt="A photo">

Step 4: In the browser, the image is displayed. Screen readers announce “alt text”.

<img src="/photo.jpg" alt="A photo">

Step 5: Checkpoint: Which attribute is required for <img> to show an image?

<img src="/photo.jpg" alt="A photo">

Step 6: Correct. The src attribute holds the image URL. Always add alt for accessibility.

<img src="/photo.jpg" alt="A photo">

Step 7: Now it's your turn. Images make pages visual. Complete the challenges below to master the <img> tag!

image.html

1 / 7

📄

Tutor:Images are embedded with the <img> tag. It is a void element: no closing tag. You need src (URL) and alt (description).

⭐ 0 EXP

Image Mastery

Unlock nodes by learning image tag and src/alt attributes.

Concept 1: The Image Tag

The <img> tag embeds an image. It is a void element (no closing tag). You need src (image URL) and alt (description for accessibility).

System Check

Which attribute is required for <img> to display an image?

hrefsrcurllink

Community Holo-Net

Showcase Your Lists

Built a gallery or used images? Share your img and alt structures.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Image Tag Explained

Pascual Vila

Frontend Instructor

Images are embedded with the <img> tag. It is a void element: use src for the image URL and alt for accessibility.

The Elements

src is the image URL; alt is the description for accessibility and when the image cannot load.

Void Element

Always include alt. Use meaningful text for content images; use alt="" for purely decorative images.

Accessibility

Screen readers announce “alt text” and use the alt attribute. Search engines use it too. Never omit alt for content images.

List Item Tag Glossary

<img> (Image): The HTML void element that embeds an image. Requires src (URL) and alt (description).
src and alt: src holds the image URL; alt describes the image for accessibility.
alt attribute: Required for accessibility. Describe what the image shows; use empty alt only for decorative images.
Semantics: Using <img> with meaningful alt helps screen readers and SEO understand images.

📖 INDEX