| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
Images in HTML are incorporated using the <img> tag, which is an empty tag, meaning it doesn’t have a closing tag. This tag contains attributes that define the source of the image, alternative text, and other properties related to the image.
Basic Syntax
The basic syntax for including an image in HTML is:
<img decoding="async" src="URL" alt="Alternative text">
Attributes
- ‘
src‘ (required): Specifies the path to the image. This can be a relative path, absolute path, or URL. - ‘
alt‘ (required): Provides alternative text for the image if it cannot be displayed. This is important for accessibility and SEO. - ‘
width‘: Specifies the width of the image. - ‘
height‘: Specifies the height of the image. - ‘
title‘: Provides additional information about the image, which is displayed as a tooltip when the mouse hovers over the image. - ‘
loading‘: Specifies the loading behavior of the image. It can have values like ‘lazy‘ for lazy loading.
Examples
Basic Example
<img decoding="async" src="image.jpg" alt="A beautiful scenery">
In this example, the image located at ‘image.jpg‘ will be displayed with the alternative text “A beautiful scenery”.
Image with Dimensions
<img fetchpriority="high" decoding="async" src="image.jpg" alt="A beautiful scenery" width="500" height="300">
Here, the image is set to display with a width of 500 pixels and a height of 300 pixels.
Image with Tooltip
<img decoding="async" src="image.jpg" alt="A beautiful scenery" title="Scenery at sunset">
This image will show the tooltip “Scenery at sunset” when the user hovers over it.
Lazy Loading Image
<img decoding="async" src="image.jpg" alt="A beautiful scenery" loading="lazy">
This image will load only when it is about to come into the viewport, which can improve page load performance.
Responsive Images
To make images responsive, CSS can be used. By setting the width to 100% and height to auto, the image will scale according to its container.
<img decoding="async" src="image.jpg" alt="A beautiful scenery" style="width:100%; height:auto;">
Example in a Full HTML Document
Here’s a full HTML document example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Example</title>
</head>
<body>
<h1>My Image Gallery</h1>
<img decoding="async" src="image1.jpg" alt="A beautiful scenery" width="600" height="400" title="Beautiful Scenery">
<img decoding="async" src="image2.jpg" alt="A stunning sunset" style="width:100%; height:auto;" loading="lazy">
<img loading="lazy" decoding="async" src="image3.jpg" alt="A magnificent mountain" width="300" height="200">
</body>
</html>
- The first image has specific width, height, and a tooltip.
- The second image is responsive and will load lazily.
- The third image has fixed dimensions.
Accessibility and SEO
The alt attribute is crucial for accessibility as it provides a text alternative for screen readers used by visually impaired users. Additionally, it helps search engines understand the content of the image, which can improve SEO.
Using images in HTML is straightforward with the <img> tag. By leveraging various attributes and CSS, you can control how images appear and behave on your web pages, enhancing both user experience and accessibility.
