HTML Image

Prev Next

The HTML <img> tag is used to embed images in a webpage. It is an empty tag, meaning it does not have a closing tag and is self-contained within its attributes.

Key Attributes of the <img> Tag

1.src (Source)

Description: Specifies the path or URL of the image to be displayed.

Importance: This attribute is required for the image to load.

Example:

<img src="images/picture.jpg" alt="Description of the image">

2.alt (Alternative Text)

Description: Provides alternative text that describes the image if it cannot be displayed. This text is also important for accessibility and SEO.

Importance: This attribute is required for accessibility and helps users understand the content of the image when it fails to load.

Example:

<img src="images/picture.jpg" alt="A scenic view of mountains">

3.width

Description: Specifies the width of the image. While this attribute can set the size of the image, it is generally recommended to use CSS for styling

Example:

<img src="images/picture.jpg" alt="Description" width="300">

4.height

Description: Specifies the height of the image. Like width, this attribute sets the image’s height but is better handled with CSS for consistent styling.

Example:

<img src="images/picture.jpg" alt="Description" height="200">

Best Practices

Use CSS for Styling: For modern web design, it is recommended to use CSS to control the dimensions and styling of images rather than the width and height attributes.

Provide Meaningful alt Text: Always include descriptive alt text to enhance accessibility and provide context for users who cannot see the image.

Summary

The <img> tag is essential for adding images to web pages. By using the src attribute to link the image, the alt attribute to describe it, and optionally width and height to control its size, you can effectively integrate images into your HTML documents. For styling, prefer using CSS for better control and flexibility.

Example:

<!DOCTYPE html>
<html>
<head>

<title>HTML Image Example</title>

</head>
<body>

<h1>Example of the HTML &lt;img&gt; Tag</h1>

<!-- Image with src, alt, width, and height attributes -->

<img
src="https://www.example.com/images/picture.jpg"
alt="A scenic view of mountains during sunset"
width="600"
height="400"
class="responsive-image"
>

<p>This image is displayed with a width of 600 pixels and a height of 400 pixels. It is also styled with CSS to be responsive.</p>

</body>
</html>

Prev Next