HTML Image Tag

image tag in HTML

Image Tag in HTML:

<img src="facebook_logo.png" alt="white facebook 
logo with blue background">

Every website must use the images as necessary. We can use image two different ways. One is import from our storage like computer or server. And other is with link from another sites or servers.

We use <img> tag to insert images to our website. It’s a single tag. You must have use two attributes in this tag. One is sre(source) and another is alt (alternate).

<img> Tag:

Image tag is a single tag and need not any closing tag. Without any attribute, you couldn’t insert images.

src=" " Attribute:

Src stands for source of the image. You have to use src attribute for both images form storage and link.

srcset=" " Attribute:

srcset stands for source sets of the images. If you want to use large or different images for large or high regulation device, then you have to use srcset attributes.

alt=" " Attribute:

alt means alternate. It means, when your browser will be unable to show your image, alt attribute will be appear. It must required. Because, search engines never read the image name. It finds the image by the help of alt text.

Don’t use single word for your attribute name/text. If you use a image of a woman with a laptop. Use (woman working with laptop) such thing instead of woman picture.

Image Code:

Image white facebook logo with blue background white facebook logo with blue background white facebook logo with blue background image attribute
<!DOCTYPE html>
<html>

<head>
<title>Image</title>
</head>

<body>
<!-----------This tag is without connecting image------------->
<img src="facebook_logo.png" alt="white facebook logo with blue background">
<!-----------This tag is with link------------->
<img src="https://cdn.worldvectorlogo.com/logos/facebook-1.svg" alt="white facebook logo with blue background">
<!-----------This tag is with height and weidth------------->
<img src="https://cdn.worldvectorlogo.com/logos/facebook-1.svg" alt="white facebook logo with blue background" height="50" width="200">
<!-----------This tag is with srcset------------->
<!-----------use different sizes images------------->

<img srcset="yourimage-320w.jpg 320w,
yourimage-480w.jpg 480w,
yourimage-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="yourimage-800w.jpg" alt="image attribute">

</body>

</html>
Twitter
Facebook
LinkedIn
WhatsApp
Tumblr
Reddit

If you find some necessity, Share the article to your social profile. Thanks a lot!