Learn with us

In HTML, you can add images to your web pages using the <img> tag. The <img> tag is a self-closing tag, meaning it doesn’t require a closing tag. Here’s how you can add images in HTML:

1. Basic Image Tag:
   Use the <img> tag and set the src attribute to the path or URL of the image file.

Example:

<img src="path/to/image.jpg" alt="Description of the image">

The src attribute specifies the source (path or URL) of the image, and the alt attribute provides alternative text that is displayed if the image fails to load or for accessibility purposes.

2. Image with Width and Height:
   You can specify the width and height of the image using the width and height attributes.

Example:

<img src="path/to/image.jpg" alt="Description of the image" width="300" height="200">

The width and height attributes determine the dimensions of the image in pixels. It’s generally recommended to specify these attributes to ensure proper layout and prevent unexpected shifts in the page content when the image is loading.

3. Image with CSS Class:
   You can apply CSS styles to an image by assigning a class to it using the class attribute.

Example:

<img src="path/to/image.jpg" alt="Description of the image" class="image-style">

In your CSS file or within a <style> tag, you can define the styles for the specified class.

4. Responsive Images:
   To create responsive images that automatically adjust their size based on the screen or container size, you can use CSS techniques such as setting the max-width to 100% or using CSS frameworks like Bootstrap.

Example:

<img src="path/to/image.jpg" alt="Description of the image" class="img-responsive">

In this example, you can define the .img-responsive class in your CSS or use the corresponding class provided by a CSS framework.

5. Image as a Link:
   You can wrap an <img> tag with an <a> tag to create an image that functions as a hyperlink.

Example:

<a href="destination-url">
  <img src="path/to/image.jpg" alt="Description of the image">
</a>

In this case, when users click on the image, they will be redirected to the specified destination-url.

These are some basic examples of how to add images to your HTML pages. Remember to provide appropriate alt text for images to improve accessibility and make your content more inclusive.