HTML IMAGES


HTML img tag is used to display images on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in an HTML image element.


In HTML, you can add images in a webpage using the <img> tag. The <img> is an empty tag which means it does not have a closing tag. This tag requires some set of attributes to specify the size, alignment, and other properties of an image.


Syntax


Here’s the syntax to embed an image in an HTML web page: 


<img src="url" alt="some_text">

Attributes


Attributes are properties that you want to set for an element. Some of the commonly used attributes for img element are mentioned below:

  • src : short for "source", this attribute specifies the path where the source (image) is located
  • alt : short for "alternate", this optional attribute is used to specify alternate text in case the image does not appear
  • width : specifies the width of the image
  • height : specifies the height of the image
  • align : specifies the alignment of the image. Possible values could be left, right, center etc. By default, it is set as left.

Example:


<h2> HTML Image Example </h2>
<img src="good-morning.jpg"
alt="good Morning friend"/>
Live Demo!


Output:

HTML Image Example

good Morning friend


src accepts the complete path of the file. In case the file is in some other folder, then we need to provide the complete path of that file.


Setting Width & Height of an Image


Width & height can be defined using the width & height attributes.


Let's have a look: 


<h2> HTML Image Example </h2>
<img src="good-morning.jpg"
alt="good Morning friend"
width="270" height="350"/>
Live Demo!


Output:

HTML Image Example

good Morning friend