img> Tag HTML Attributes Examples

<img> Tag HTML Attributes Examples Tutorials Ar3school

The <img> tag in HTML is used to embed images into a web page. It is a self-closing tag, meaning it doesn’t require a closing tag. Images are an essential part of web design, and understanding how to effectively use the <img> tag can greatly enhance the visual appeal and functionality of a website.

Syntax of the <img> Tag

The basic syntax of the <img> tag is as follows:

<img src="imageURL" alt="description">

src (required): The src attribute specifies the URL or file path of the image.

alt (required): The alt attribute provides alternative text for the image. It is displayed if the image fails to load and is essential for accessibility purposes, aiding users who may be using screen readers or in cases where images cannot be displayed.

Examples of <img> Tag Usage

Example 1: 

Embedding an Image from a URL

<img src="https://example.com/image.jpg" alt="A beautiful landscape">

This code embeds an image from the specified URL and provides a description in the alt attribute.

Example 2: 

Embedding an Image from a Relative Path

<img src="images/photo.jpg" alt="Family gathering">

If the image file is located in a folder named images within the project directory, this code will display the image with the specified description.

Example 3: 

Adding Width and Height Attributes

<img src="picture.png" alt="Artwork" width="300" height="200">

Using the width and height attributes allows you to specify the dimensions of the image in pixels. This can help maintain the aspect ratio of the image.

Example 4:

 Using the title Attribute for Additional Information

<img src="tag.png" alt="Your Tags" title="Your Tags Here">

The title attribute provides additional information about the image. When a user hovers over the image, this text will be displayed as a tooltip.

Additional Attributes

The <img> tag also supports other attributes:

loading: Specifies the image loading strategy.

decoding: Specifies the image decoding method.

style: Allows for inline CSS styling of the image.

class: Assigns a class name to the image for styling or scripting purposes.

The <img> tag is fundamental for incorporating images into web pages. Understanding its attributes and how to use them effectively is crucial for creating visually appealing and accessible websites.

Remember, providing meaningful alt text and optimizing images for web performance are good practices for both user experience and search engine optimization.

HTML's <img> tag is versatile and easy to use, enabling developers to enhance the aesthetics and functionality of their websites through visual elements.