Insert images: <img> MCQs Quiz | Class 10

Understanding the <img> Tag in HTML

The <img> tag is fundamental in HTML for embedding images directly into a web page. It is an empty (or self-closing) tag, meaning it does not have a closing tag like </img>. Images significantly enhance the visual appeal and information delivery of web content, and understanding how to properly use the <img> tag is crucial for any web developer.

Key Points about the <img> Tag:

• Purpose: To embed raster images (like JPEG, PNG, GIF) into an HTML document.
• Self-Closing: The <img> tag doesn’t require a separate closing tag.
• Mandatory Attributes:
  • src: Specifies the URL (path) of the image file. This attribute is essential for the image to display.
  • alt: Provides alternative text for the image. This text is displayed if the image fails to load, or if a user is using a screen reader. It’s crucial for accessibility and SEO.
• Optional Attributes:
  • width: Defines the width of the image in pixels.
  • height: Defines the height of the image in pixels.
  • title: Provides a tooltip that appears when a user hovers their mouse over the image.

Image Embed Tag (`<img>`):

The <img> tag acts as an inline element, meaning it sits within the flow of text. It’s used to link to an image file, which the browser then fetches and displays within the document. The image itself is not embedded directly into the HTML file but linked from an external source.

Basic Usage:

The most basic usage of the <img> tag includes the src and alt attributes:

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

• src Attribute: This attribute holds the source of the image. It can be:
  • Relative Path: If the image is in the same directory as the HTML file, you just need the filename (e.g., image.jpg). If it’s in a subfolder (e.g., images), you’d use images/image.jpg.
  • Absolute Path (URL): A full web address (e.g., https://www.example.com/images/image.jpg).
• alt Attribute: This is vital for web accessibility. It describes the image content for users who cannot see the image (e.g., visually impaired users using screen readers) or when the image fails to load (e.g., due to a broken link or slow internet).

Example Table of `<img>` Attributes:

Quick Revision:

• The <img> tag embeds images into an HTML document.
• It is a self-closing tag.
• The src attribute specifies the image file path.
• The alt attribute is crucial for accessibility and serves as fallback text if the image doesn’t load.
• The width and height attributes control image dimensions.
• Use appropriate image formats (JPEG for photos, PNG for graphics with transparency, GIF for simple animations).

Extra Practice Questions:

1. What is the purpose of the title attribute in an <img> tag?
2. If you want an image logo.png located in a folder named assets (which is in the same directory as your HTML file) to appear, what would be the correct src value?
3. Explain why the alt attribute is considered important for web accessibility.
4. Can you directly embed a video using the <img> tag? If not, which tag is used for videos?
5. What are two benefits of specifying width and height attributes for images in HTML, rather than relying solely on CSS?