The <img> Element in HTML

The <img> element is used to display images on a webpage. Images help make your pages more visual, engaging, and informative. The <img> tag does not have a closing tag. Instead, it uses attributes to tell the browser where the image is and how to show it.

The most important attributes are:

src → the image link (source)
alt → a text description of the image (important for accessibility and SEO)

Think of the src like the address of the image, and alt as backup text if the image can’t load.

Understaning the layout of the <img> Element

Start tag	Element content	End tag
<a href=”https://www.educodes.org”>	View Educodes	</a>

Note: Some HTML elements have no content (like the <img> element). These elements are called empty elements. Empty elements do not have an end tag!

📘 Example Code

Below is an example showing a heading and an image:

💡 This is what the code looks like inside an editor

<!DOCTYPE html>
<html>
  <head>
    <title>Image Example</title>
  </head>
  <body>
    <h1>Welcome to EduCodes!</h1>
    <img src=“https://www.educodes.org/wp-content/uploads/2025/10/Educodes-Icon.png” alt=“EduCodes Icon”>
  </body>
</html>

🖥️ What This Will Look Like in a Browser

✅ Example output you would see on a webpage:

Welcome to EduCodes!

🧪 Time to Practise!

Now it’s your turn to insert an image.

Try this example first:

<img src="https://www.educodes.org/wp-content/uploads/2025/10/Educodes-Icon.png" alt="EduCodes Icon">

What To Do

✅ Type the code above in the editor below
✅ Click Test Code to see the result
✅ Try changing the alt text

Tip 💡

Always include the alt attribute.
It helps people using screen readers and appears if the image fails to load.
This makes your site more user-friendly and better for SEO! 🚀

HTML Editor

Live Preview

Next up: build bullet lists with <ul> and <li>!

Next Lesson