Use the img tag to embed images in your HTML documents. This is an empty element, meaning it does not have a closing tag and only contains attributes.
The two primary attributes you will always use with the <img> tag are:
src attributes in html
This attribute is required and specifies the source or URL of the image file you want to embed. The value of the src attribute can be a relative URL (pointing to an image within your website’s file structure) or an absolute URL (referring to an image on another website). Note that images are linked to HTML pages, not technically inserted; the <img> tag creates a placeholder for the referenced image. Images can also be embedded directly using base64 encoding.
alt attribute for image in html
This attribute is also critical and highly recommended for accessibility. It provides alternate text for the image. This text is displayed if the browser cannot load the image (due to a broken link, server issues, or if the user is using a text-only browser). More importantly, screen readers used by visually reduced individuals depend on the alt attribute to describe the image content. Search engines also use alt text to understand the content of images.
What is the alt attribute of IMG tag?
Providing meaningful alternate text is a fundamental aspect of web accessibility and is required to comply with WCAG 2.0 guidelines. The alt text should strive to present the same purpose and information as the image, acting as a replacement for it.
- Be descriptive and concise: The text accurately describes the image content. If the image conveys information, the alt text should convey the same information. Aim for one to two sentences or about 75 words or less for simple images.
- Consider the context: What is important about the image in the surrounding content?
- Convey the function: If the image is a link or a button, the alt text should describe its action or destination.
- Include all text within the image: If the image contains text, that text should be included in the alt attribute.
- Avoid redundancy: Do not include phrases like “image of” or “picture of”. Also, avoid repeating text that is already present near the image.
- For decorative images: If an image is visual purposes and does not convey essential information, use a null or empty alt attribute (alt=””). This signals to assistive technologies that the image can be safely ignored. Omitting the The alt attribute, when completely omitted, takes on a distinct semantic meaning, signifying that the image represents significantt content for which there is no text equivalent.
Examples
Embedding an image with a descriptive alt attribute:
<!DOCTYPE html>
<html>
<body>
<img src="images/logo.png" alt="Company logo showing a stylized letter C">
</body>
</html>
In this example, the alt attribute provides a short description of the company logo for users who cannot see the image. The src attribute points to the location of the image file.
Embedding an image that functions as a link:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com">
<img src="images/home-icon.png" alt="Link to homepage">
</a>
</body>
</html>the image acts as a link. The alt text clearly indicates the destination of the link.
Embedding a decorative image with an empty alt attribute:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to our Website</h1>
<img src="images/divider.png" alt="">
<p>This is the main content of our page...</p>
</body>
</html>In this case, divider.png might be a purely visual separator. The empty alt attribute tells screen readers to ignore this image as it does not convey any essential information.
By constantly using the alt attribute with meaningful descriptions (or an empty value for decorative images), you improve the accessibility and usability of your web pages for everyone.
HTML5 Topics