HTML <img> Tag

The <img> tag in HTML is used to embed images into a webpage. It is a void element, meaning it does not have a closing tag, and its primary purpose is to display visual content directly within the HTML document. Unlike background images applied through CSS, images added with <img> become part of the document's content, allowing them to be indexed by search engines and accessible to assistive technologies.

The <img> tag can render a wide variety of image formats, such as JPEG, PNG, GIF, SVG, WebP, and more, depending on browser support. Images are loaded from a source URL, which can be either a local file path or an external web address. The tag is inline by default but can be styled with CSS to behave like a block-level element, have responsive dimensions, borders, shadows, or other visual effects.

One of the most important aspects of the <img> tag is its role in content accessibility. When properly used with descriptive alternative text, it ensures that visually impaired users using screen readers can understand the content and context of images. Additionally, images in <img> tags can be part of semantic content, such as figures in articles, product images in e-commerce sites, or visual aids in tutorials and blogs.

The <img> tag also allows for integration with modern web features such as lazy loading, responsive images using the srcset attribute, and optimization for faster page loading. It remains one of the most fundamental and widely used elements in HTML for enriching webpages with visual content.