HTML: <img> tag
In this series of learning HTML, we will teach you how to use HTML img tag with proper syntax and lots of examples. Let’s start on the HTML img tag.
Description of HTML img tag
The HTML “img” tag is used to embed images in an HTML document. The “img” tag is a self-closing tag, which means that it does not require a closing tag.
Here is an example of how to use the “img” tag in HTML:
<img src="image.jpg" alt="A beautiful sunset">In the example above, the “src” attribute specifies the URL or file path of the image to be displayed, while the “alt” attribute provides alternative text for the image. The alternative text is displayed when the image cannot be loaded or is not available, and it also helps to improve the accessibility of the web page by providing a text alternative for visually impaired users or for situations where the image cannot be displayed.
The “img” tag can also include other attributes to customize the appearance and behavior of the image, such as width, height, border, and more.
It’s important to note that images should be optimized for web use to ensure that they do not slow down the loading time of the page. This can be achieved by using compressed image formats and minimizing the file size of the image without sacrificing quality.
Syntax of HTML img tag
The <img> tag in HTML is used to embed images into a webpage. Here’s the basic syntax of the <img> tag:
<img src="image-source" alt="image-description">The src attribute is used to specify the source file for the image, which can be a local file or a URL. The alt attribute is used to provide a text description of the image, which is displayed if the image cannot be loaded or if the user is using an assistive device such as a screen reader.
Optionally, the <img> tag can have additional attributes to control its behavior and appearance, such as:
width: Specifies the width of the image in pixels or as a percentage of the parent container.height: Specifies the height of the image in pixels or as a percentage of the parent container.title: Specifies a tooltip text to be displayed when the user hovers over the image.class: Specifies one or more CSS class names to apply to the image for styling.style: Specifies CSS styles to apply to the image for styling.
Here’s an example of using the <img> tag to display an image on a webpage with additional attributes:
<img src="example.jpg" alt="Example Image" width="300" height="200" title="Click to enlarge" class="img-thumbnail" style="border: 1px solid black;">Note that it’s important to use appropriate image file formats and optimize image sizes to ensure fast page loading times and good user experience.
Global Attributes
Here are some examples of global attributes that can be used on an HTML img tag:
alt: Specifies an alternative text for an image if it cannot be displayed. This attribute is important for accessibility purposes, as it allows users who are visually impaired to understand the content of an image even if they cannot see it. Example:
<img src="example.jpg" alt="A red sports car driving down a winding road">2.src: Specifies the URL of the image that should be displayed. Example:
<img src="example.jpg">3. width and height: Specifies the dimensions of the image, in pixels. Example:
<img src="example.jpg" width="400" height="300">4. title: Specifies a title for the image, which is displayed as a tooltip when the user hovers over the image. Example:
<img src="example.jpg" title="Red sports car">5. style: Specifies inline CSS styles for the image. Example:
<img src="example.jpg" style="border: 1px solid black;">6. class and id: Specifies CSS classes and IDs for the image, which can be used to apply styles to the image with CSS. Example:
<img src="example.jpg" class="car-image" id="main-image">These are just a few examples of the global attributes that can be used on an HTML img tag. Global attributes can be used on many different types of HTML elements and provide a way to add extra information and functionality to an element without needing to create a custom attribute.
Event Attributes
While HTML event attributes are not recommended for modern web development due to concerns about separation of concerns and maintainability, here are some examples of event attributes that can be used on an HTML img tag:
onload: Specifies a script to be run when the image has finished loading. This can be used to perform additional actions after the image has loaded, such as displaying a message or updating the page content. Example:
<img src="example.jpg" onload="alert('Image loaded!')">2. onerror: Specifies a script to be run if the image fails to load. This can be used to display an error message or provide alternative content. Example:
<img src="missing-image.jpg" onerror="this.src='default-image.jpg'">3. onmousedown, onmouseup, onmouseover, onmousemove, and onmouseout: Specifies scripts to be run when the user interacts with the image using the mouse. These events can be used to add interactivity to an image, such as displaying a tooltip or changing the image when the user clicks on it. Example:
<img src="example.jpg" onmouseover="this.src='hover-image.jpg'" onmouseout="this.src='example.jpg'">Again, it’s worth noting that event attributes are not recommended for modern web development due to concerns about separation of concerns and maintainability. Instead, it is generally recommended to use event listeners and separate JavaScript files to handle interactions with HTML elements.
Other Attributes
Here are some examples of non-global and non-event attributes that can be used on an HTML img tag:
alt: Specifies an alternative text for an image if it cannot be displayed. This attribute is important for accessibility purposes, as it allows users who are visually impaired to understand the content of an image even if they cannot see it. Example:
<img src="example.jpg" alt="A red sports car driving down a winding road">2. src: Specifies the URL of the image that should be displayed. Example:
<img src="example.jpg">3. width and height: Specifies the dimensions of the image, in pixels. Example:
<img src="example.jpg" width="400" height="300">
4. sizes: Specifies the sizes of the image, relative to the viewport width. This attribute is used in conjunction with the srcset attribute to provide responsive images that can adapt to different screen sizes. Example:
<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" src="medium.jpg">5. srcset: Specifies a list of image sources that can be used to provide alternative versions of the image based on the device’s pixel density. Example:
<img srcset="example.jpg 1x, example@2x.jpg 2x, example@3x.jpg 3x">6. crossorigin: Specifies whether the image should be fetched with CORS (Cross-Origin Resource Sharing) support enabled. Example:
<img src="example.jpg" crossorigin="anonymous">7. loading: Specifies when the image should be loaded. This attribute is used to improve page performance by delaying the loading of images until they are needed. Example:
<img src="example.jpg" loading="lazy">These are just a few examples of the attributes that can be used on an HTML img tag. There are many other attributes that can be used to control the behavior and appearance of images on a web page.
Notes on HTML img tag
The <img> tag is used in HTML to display images on a web page. Here are some important things to keep in mind when using the <img> tag:
- The <img> tag is an empty tag, which means that it does not require a closing tag.
- The src attribute is required, and it specifies the URL of the image that should be displayed.
- The alt attribute is also required, and it provides a text description of the image. This is important for accessibility, as it allows screen readers to describe the image to visually impaired users.
- The width and height attributes can be used to specify the dimensions of the image. It’s generally a good practice to include these attributes so that the browser can allocate the appropriate space for the image before it’s loaded.
- The <img> tag can also include a number of optional attributes, including title, border, and align.
- The <img> tag can be styled using CSS to control its appearance, including its size, position, and border.
- The file format of the image should be compatible with the web browser being used. Common formats include JPEG, PNG, and GIF.
- It’s important to optimize images for the web to reduce their file size and improve page load times. This can be done by compressing the image and reducing its dimensions.
- The <img> tag can be nested inside other HTML elements, such as <a> tags, to create clickable images that link to other pages or resources.
Browser Compatibility
The HTML img tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML img tag
We will discuss the <img> tag below, exploring examples of how to use the <img> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML 4.01 Transitional Document
Here’s an example of an HTML 4.01 Transitional document that includes an <img> tag to display an image:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my web page</h1>
<p>Here's an image of a cat:</p>
<img src="cat.jpg" alt="A cute cat" width="300" height="200">
<p>Isn't it adorable?</p>
</body>
</html>
In this example, we have an HTML 4.01 Transitional document that includes a <head> section with a <title> tag and a <body> section with a heading, a paragraph of text, an <img> tag, and another paragraph of text.
The <img> tag has several attributes:
- The src attribute specifies the URL of the image file, in this case “cat.jpg”.
- The alt attribute provides a text description of the image, in case the image cannot be displayed or for accessibility purposes.
- The width and height attributes specify the dimensions of the image, in pixels. In this case, we’ve set the width to 300 and the height to 200.
Note that HTML 4.01 is an older version of HTML and has been superseded by HTML5. However, the <img> tag and its attributes remain largely the same between the two versions.
XHTML 1.0 Transitional Document
Here’s an example of an XHTML 1.0 Transitional document that uses the img tag to display an image:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML Document</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here's a picture of my dog:</p>
<img src="mydog.jpg" alt="A picture of my dog">
<p>Isn't he cute?</p>
</body>
</html>
In this example, we first declare the document type as XHTML 1.0 Transitional using the DOCTYPE declaration. We also include a title element in the head section of the document.
In the body section, we have a heading (h1) and a paragraph (p) that introduce the image. The img tag is used to display the image of our dog, which is stored in a file named mydog.jpg. The src attribute specifies the URL or file path of the image, while the alt attribute provides a text description of the image for accessibility purposes.
Finally, we have another paragraph that comments on the image. This XHTML document is written in a way that conforms to the XHTML 1.0 Transitional standard, which allows for elements and attributes that were deprecated in later versions of XHTML.
XHTML 1.0 Strict Document
If you created a new HTML image, it will display the text “Example image” instead.
Here’s an example of an XHTML 1.0 Strict document that uses the img tag to display an image:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example XHTML Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here's a picture of my dog:</p>
<img src="mydog.jpg" alt="A picture of my dog" />
<p>Isn't he cute?</p>
</body>
</html>In this example, we first declare the document type as XHTML 1.0 Strict using the DOCTYPE declaration. We also include a title element in the head section of the document, as well as a meta element to specify the character encoding of the document.
In the body section, we have a heading (h1) and a paragraph (p) that introduce the image. The img tag is used to display the image of our dog, which is stored in a file named mydog.jpg. The src attribute specifies the URL or file path of the image, while the alt attribute provides a text description of the image for accessibility purposes.
One key difference between this example and the previous one is that this document is written in strict adherence to the XHTML 1.0 Strict standard, which means that certain elements and attributes that were allowed in the Transitional version are no longer permitted. For example, the height and width attributes are no longer allowed on the img tag in the Strict version, as they are considered presentational rather than semantic.
Despite these stricter guidelines, however, the img tag remains a powerful and useful tool for displaying images on a webpage in an accessible and user-friendly way.
XHTML 1.1 Document
Here’s an example of an XHTML 1.1 document that uses the img tag to display an image:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML Document</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here's a picture of my dog:</p>
<img src="mydog.jpg" alt="A picture of my dog" />
<p>Isn't he cute?</p>
</body>
</html>
In this example, we start with an XML declaration that specifies the document version and encoding. We then declare the document type as XHTML 1.1 using the DOCTYPE declaration. We also include a title element in the head section of the document, as well as a meta element to specify the character encoding of the document.
In the body section, we have a heading (h1) and a paragraph (p) that introduce the image. The img tag is used to display the image of our dog, which is stored in a file named mydog.jpg. The src attribute specifies the URL or file path of the image, while the alt attribute provides a text description of the image for accessibility purposes.
One key difference between this example and the previous ones is that this document is written in the XHTML 1.1 standard, which introduces a few changes from previous versions. For example, the xmlns attribute is now required on the html tag to specify the namespace, and the type attribute is no longer required on the script tag.
Additionally, the img tag must be properly closed with a trailing slash (/), even though it’s not strictly required in previous versions. This is because XHTML 1.1 follows stricter XML syntax rules, where all tags must be properly formed.
Despite these differences, however, the img tag remains a powerful and useful tool for displaying images on a webpage in an accessible and user-friendly way, regardless of the version of XHTML being used.