What is the HTML tag used to show an image?

The HTML tag used to show an image is the <img> tag.

Understanding the <img> Tag

The primary purpose of the <img> tag is to embed an image within an HTML page. However, it's important to understand the technical aspect: as the reference states, images are not technically 'inserted' directly into the code. Instead, the <img> tag creates a reference or link to the image file, which the browser then fetches from its location and displays within the web page structure.

This linking mechanism makes web pages efficient by not embedding large image data directly into the HTML file itself.

Essential Attributes

The <img> tag is an empty tag, meaning it doesn't have a closing tag like </p> or </div>. Its behavior is controlled entirely by its attributes. Two attributes are considered essential for basic image display and accessibility:

Attribute	Description
src	Source: Specifies the path (URL or file path) to the image file. This is crucial!
alt	Alternative Text: Provides descriptive text for the image.

Why alt Text is Important

While src tells the browser what image to load, the alt attribute serves several critical purposes:

• Accessibility: Screen readers use alt text to describe images to visually impaired users.
• SEO: Search engines can use alt text to understand the content of an image, potentially helping with image search rankings.
• Fallback: If the image file cannot be loaded (due to incorrect path, network issues, etc.), the browser will display the alt text instead.

Example Usage

Here is a simple example showing how to use the <img> tag with the essential src and alt attributes:

<img src="images/my-awesome-photo.jpg" alt="A scenic view of mountains at sunset">

In this example:

• src="images/my-awesome-photo.jpg" tells the browser where to find the image file relative to the HTML document.
• alt="A scenic view of mountains at sunset" provides a text description of the image content.

Further Customization

Beyond src and alt, the <img> tag supports numerous other attributes to control aspects like size, alignment, and behavior:

• width and height: Specify the dimensions of the image in pixels or percentages. Using these can prevent layout shifts while the image loads.
• title: Provides advisory information about the image, often displayed as a tooltip when the user hovers over it.
• Loading Attributes: Attributes like loading="lazy" can improve performance by deferring the loading of images until they are near the viewport.

For comprehensive details on all available attributes and advanced usage, you can refer to resources like the MDN Web Docs on the <img> element.