HTML Images

Hello there, web explorers! Today, we’re going on an adventure into the world of HTML images. Buckle up, because we’re about to dive into the nitty-gritty of embedding images in HTML, understanding image attributes, and more. So, let’s get started!

How to Embed Images in HTML

Embedding images in HTML is as straightforward as it gets. All you need is the <img> tag. This tag is an empty element, meaning it doesn’t need a closing tag. Here’s a basic example:

<img src="" alt="A beautiful flower">

In the above example, src (source) attribute points to the image file, and alt (alternative) attribute provides a text description of the image. This description is displayed if the image can’t be loaded and is also used by screen readers for visually impaired users.

Understanding Image Attributes

Now, let’s delve a bit deeper into image attributes. The src and alt attributes are essential, but there are more attributes you can use to control how your image is displayed.

The src Attribute

The src attribute specifies the path to the image file. This can be a local path on your own website or a URL to an image on another website. Here’s an example of using a URL:

<img src="" alt="A beautiful flower">

The alt Attribute

The alt attribute is used to provide a description of the image. This is particularly important for accessibility, as screen readers will read this description to visually impaired users. If the image can’t be displayed for any reason, the alt text will be shown instead.

The width and height Attributes

These attributes allow you to set the size of the image. The values are specified in pixels by default:

<img src="" alt="A beautiful flower" width="500" height="300">

In the above example, the image will be displayed with a width of 500 pixels and a height of 300 pixels.

HTML Images Examples: Full Code

Let’s put it all together with some code examples. Here’s how you might use these attributes in a real HTML document*:

<!DOCTYPE html>

<h2>HTML Images</h2>
<p>Here's a picture of a beautiful sunset:</p>

<img src="" alt="A beautiful flower" width="500" height="300">


Another code example is as follows:

<!-- Example of an HTML image with a link -->
<a href="">
  <img src="" alt="Description of Image" width="500" height="600">

*Very important Note: Remember to replace “” and “” with your actual image file and URL.


In this tutorial, we’ve learned how to embed images in HTML using the <img> tag and various attributes. We’ve also seen how to control the size of the image using the width and height attributes. Remember, using images effectively can make your web pages more engaging and accessible.

Frequently Asked Questions (FAQ)

How to put an image in HTML?

What is an HTML image?

How do I make an image visible in HTML?

How do I add a PNG to HTML?

How can I align images in HTML?

Why is my image not displaying in HTML?

How can I make images responsive in HTML?

How can I add a background image in HTML?

What is the purpose of the alt attribute in HTML images?

And that’s a wrap! We hope this tutorial has shed some light on the world of HTML images. Remember, practice makes perfect. So, don’t be afraid to get your hands dirty and start experimenting with HTML images. Happy coding!

Scroll to Top