📘 Blog 4: Adding Images in HTML — Make Your Pages Visually Engaging

Welcome back! So far, you’ve learned how to add text content and format it beautifully. Now it’s time to take your webpage to the next level by adding images. Images make your content more engaging, break up long text, and help communicate ideas visually.

Let’s dive into how to add, style, and optimize images in HTML!

🖼 The `<img>` Tag — The Basic Syntax

HTML uses the <img> tag to display images. Unlike headings and paragraphs, this tag is self-closing, meaning it doesn’t need a closing tag.

Basic syntax:

<img src="image.jpg" alt="Description of image">

🏷 What do these attributes mean?

src (source): The path to your image file. This can be a local file or a URL.
alt (alternative text): A description of the image. This is important for screen readers (accessibility) and also displays if the image fails to load.

🌍 Using Local vs. Online Images

Local Image Example

<img src="images/my-photo.jpg" alt="My Profile Photo">

Make sure the image file is in the correct folder relative to your HTML file.

Online Image Example

<img src="https://example.com/photo.jpg" alt="Example Photo">

Be careful when using online images — they may be removed or change without notice.

📏 Controlling Image Size

You can change the width and height directly in the tag:

<img src="cat.jpg" alt="Cute Cat" width="300" height="200">

💡 Tip

Use either width or height to maintain the aspect ratio automatically.
It’s often better to control size with CSS for flexibility.

Example with CSS:

<img src="dog.jpg" alt="Happy Dog" style="width: 100%; max-width: 500px;">

✨ Adding Styling to Images

You can style images just like any other element using CSS.

Example:

<img src="flowers.jpg" alt="Colorful Flowers" style="border: 2px solid black; border-radius: 8px;">

This adds a black border and rounded corners to your image.

🧭 Aligning Images

You can use CSS to align images:

<img src="mountain.jpg" alt="Beautiful Mountain" style="display: block; margin: 0 auto;">

This centers the image on the page.

🛡 Why `alt` Text is Important

Helps screen readers describe images to visually impaired users.
Displays if the image can’t load.
Improves SEO by giving search engines more context.

Always write meaningful and concise alt text!

💡 Example: Complete HTML Page with Images

<!DOCTYPE html>
<html>
<head>
  <title>My Photo Gallery</title>
</head>
<body>
  <h1>Welcome to My Gallery</h1>
  <p>Here are some of my favorite pictures.</p>

  <img src="sunset.jpg" alt="Sunset at the beach" width="400">

  <img src="mountain.jpg" alt="Snowy mountain peak" style="width: 300px; border: 3px solid #333;">

  <p>This is my dog:</p>
  <img src="dog.jpg" alt="Smiling dog" style="width: 250px; display: block; margin: 0 auto;">
</body>
</html>

✅ Summary

Use the <img> tag to display images.
Always include descriptive alt text for accessibility and SEO.
Control size and styling with HTML attributes or CSS.
Align images to make your layout look clean and professional.

🚀 What’s Next?

In the next blog, we’ll explore how to add links and buttons to make your page interactive. You’ll learn how to create navigation menus, link to other pages, and add call-to-action buttons.

Stay tuned and happy coding! 🌟

🖼 The <img> Tag — The Basic Syntax