Have you come across websites, on which text, images and videos keep shifting around the page as various objects get downloaded? Does it irritate you? Then prevent the same from happening to your blog! The problem is often caused by the absence of size attribute in “IMG” tags.
In this post, we shall learn about the “IMG” tag in HTML which is used to embed images on a webpage, what its most essential attributes are and why each of them is essential for good user experience.
What is the “IMG” Tag in HTML?
You have most probably come across the “A” tag used to embed an “Anchor” on webpages using HTML. This tag is used to create a hyperlink to another location on the World Wide Web. The location may be a different point on the same page, a different page on the same website/blog, or a different website/blog altogether! The “IMG” Tag is just like the “Anchor” tag for Images. Instead of simply linking to the image, the “IMG” tag displays the image at the same location.
What are the essential attributes of the “IMG” Tag?
The “IMG” Tag always includes the location/URL of the image, using the “src” attribute.
Apart from this, all other attributes are not mandatory but essential for good design.
- Image Size: Specified using “height” and “width” attributes. The size attribute is used by web browsers to reserve space for images which have not yet been downloaded. This prevents the rest of the objects from getting shifted around as the image is loaded.
- Alternate Text: Specified using “alt” attribute. It is the text displayed when the image has not yet been downloaded, or the image has been blocked or removed from the specified URL. When an image is used as a link, the alternate text acts as the anchor text.
- Title Text: Specified using “title” attribute. This is the information displayed in a bubble when you hover over the image. It is often used to tell the user what the image is about.
- Caption Text: Specified using “caption” attribute. Caption Text is the text displayed below the image, and always visible to the user. Its function is similar to that of the Title Tag.
Other attributes like border, location and margin can also be specified for better design.