img: The Image Embed element

The <img> HTML element embeds an image into the document.

Attributes

Specific attributes

Required attributes

alt="[alternative text]" provides alternative text for the image if it cannot be displayed. This is crucial for accessibility.

src="[URL]" specifies the URL of the image.

Allowed attributes

height="[number]" specifies the intrinsic height of the image, in pixels.

ismap indicates that the image is part of a server-side image map.

usemap="[map name]" associates the image with a client-side image map (must start with #).

width="[number]" specifies the intrinsic width of the image, in pixels.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<img src="/images/indieweb-logo.svg" alt="IndieWeb logo" width="200" height="100">

<img src="/photos/personal-website-screenshot.png" 
     alt="Screenshot of a minimalist personal website with clean typography" 
     width="800" height="600">

<p>Here's my setup for building static sites:</p>
<img src="/images/dev-setup.jpg" alt="Laptop with code editor showing Jekyll configuration files">