{"post":"

Images are a very important part of a website. Images make the website attractive and help make the difference between an average looking site and a really engaging one. They can improve the design and appearance of the web page.
\n
\nSyntax of HTML images:
\n

<img src=\"url\" alt=\"alternative text\">

HTML images are defined using <img> tag and has src as its attribute whose value is the url of the image.
The <img> tag is the empty tag which means it does not have the closing tag.
The alt attribute provides an alternate text for an image in case the image does not load. The value of alt attribute should describe the image.

Image formatting:

The size of the image can be changed using width and height attributes. For example:
\n

<img src=\"xyz.jpg\" alt=\" any random xyz image\" width=\"500\" height=\"400\">

Figure and figcaption:

<figure>
\nImages often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated.

You can have more than one image inside the <figure> element as long as they all share the same caption.
\n

<figcaption>
\nThe <figcaption> element has been added to HTML5 in order to allow web page authors to add a caption to an image. Before these elements were created there was no way to associate an <img> element with its caption.
\n
\nImage floating:
\nWe use the CSS float property to let the image float to right or left of the text. For example,
\n

<p><img src=\"flower1.gif\" alt=\"sunflower\" style=\"float:right;width:50px;height:50px;\">\nThe image will float to the right of the text.</p>

Image as a link:

Put the <img> tag inside the <a> tag to use image as link. For example,

<a href=”#”><img src=”image.gif” alt=”an image” ></a>

\n","title":"HTML Images(img tag)","authorDetails":{"name":"Aayushi Bansal","slug":"aayushi-bansal"},"description":"Here, we'll learn about the img tag in HTML which is used for displaying images in browser. We'll also learn about new HTML5 elements Figure and figcaption.","slug":"html/html-images-img-tag/","articleId":"636a83457bb1ce5072622bce","bookmarkStatus":{"isBookmarked":false,"bookmarkId":null}}