HTML <img> Tag

HTML Tag Img examples are the topic of today’s post. With reasonable faith, it will satisfy the educational demands.

The HTML <img> tag is used to insert an image into a web page.

Can insert images in the following ways:


<!DOCTYPE html> <html> <body> <img src="" alt="boy enjoying with friends" width="400" height="450"> </body> </html>

Image alignment using CSS:


<!DOCTYPE html> <html> <body> <img src="" alt="cheers Together" width="58" height="58" style="vertical-align:bottom"> <img src="" alt="cheers Together" width="58" height="58" style="vertical-align:middle"> <img src="" alt="cheers Together" width="58" height="58" style="vertical-align:top"> <img src="" alt="cheers Together" width="58" height="58" style="float:right"> <img src="" alt="cheers Together" width="58" height="58" style="float:left"> </body> </html>

Using CSS, set a border to the image:


<!DOCTYPE html> <html> <body> <img src="" alt="Cheers Emoji" width="58" height="58" style="border:4px solid blue"> </body> </html>

To set the top-bottom margin to an image (via CSS), follow these steps:


<!DOCTYPE html> <html> <body> <img src="" alt="Cheers Emoji" width="58" height="58" style="vertical-align:middle; margin:25px 0px"> </body> </html>

Margin the top and bottom of the image (with CSS):


<!DOCTYPE html> <html> <body> <img src="" alt="Cheers Emoji" width="58" height="58" style="vertical-align:middle;margin:44px 0px"> </body> </html>

You can insert images from a different folder or website by following these steps:


<!DOCTYPE html> <html> <body> <img src="" alt="Dancing Banana" width="300" height="140"> <img src="" alt="Dancing Banana" width="350" height="230"> </body> </html>

An image can be hyperlinked by following these steps:


<!DOCTYPE html> <html> <body> <a href=""> <img src="" alt="" width="80" height="120"> </a> </body> </html>

Here’s how you can create a clickable area in an image map. There is a hyperlink for each region:


<!DOCTYPE html> <html> <body> <img src="" alt="Home" usemap="#homemap" width="350" height="310"> <map name="homemap"> <area shape="rect" coords="34,44,270,350" alt="Laptop" href="laptop.htm"> <area shape="rect" coords="290,172,333,250" alt="Tablet" href="tablet.htm"> <area shape="circle" coords="337,300,44" alt="Soda Can" href="soda.htm"> </map> </body> </html>

Here’s how you can use max-with with CSS to an <img> tag:


<!DOCTYPE html> <html> <head> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <img src="" alt="Elon mUsk"> </body> </html>

Tag Img Usage

The Tag Img <img> is utilized to insert an image into an HTML page.

Generally, images are not embedded in web pages; they are linked to them. The <img> tag provides storage space for the referenced image.

To utilize Img tag <img>, the following two attributes must be present:

  1. src – Points to the image’s source.
  2. alt – Provides an alternative text for an image if, for any reason, the image isn’t shown
IMPORTANT: Make sure you also indicate the width and height of your images. The page may flicker when an image has a width and height defined.
Advice: Linking an image to a different document is as easy as nesting the Tag Img <img> within an <a> tag.

Attributes List

srcURLProvides the image path
usemap#mapnameAssigns an image to a client-side map.
widthpixelsIndicates the image’s width.
srcsetURL-list Contains a list of images suitable for various scenarios.
ismapismapProvides a server-side image map for an image.
Indicates whether a browser should load an image right away or delay it until specific requirements are met.
longdescURLProvides a URL to an image’s complete information.
Determine which referrer data should be used when retrieving an image.
alttextIndicates an alternate text for an image.
Make it possible for Canvas to use images from third-party websites that support cross-origin access.
heightpixelsSets the image’s height.
sizessizesSets image sizes based on page layouts.



Global Attributes can also be accepted in HTML with the <img> tag.


Event Attributes can also be specified in HTML with the <img> tag.

Browser Compatibility


Predefined CSS

By default, many browsers will render the following image element values:

img {
display: inline-block;

HTML <img> Tag Benefits

Some of the benefits of using this tag include:

  • Images can make web pages more engaging and visually appealing, improving the overall user experience.
  • Since images can be quite large, using the <img> tag with the appropriate attributes can help to reduce file size and optimize loading times, improving website performance.
  • Including alternative text (alt attribute) with the <img> tag helps to make images accessible to users who rely on screen readers or have visual impairments.
  • Adding descriptive alt text and using relevant filenames can help search engines better understand the content of your web page, potentially improving your search engine rankings.
  • The <img> tag can be used to display a wide range of image formats, including JPEG, PNG, GIF, and SVG.
If you found this article knowledge worthy, then do leave your reaction below in order to appreciate our efforts or to provide us a feedback to make improvements on this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

One thought on “HTML Tag Img Examples

  1. My brother recommended I may like this web site.
    He was entirely right. This submit actually made my day.
    You can not imagine simply how so much time I had spent for
    this info! Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *