Learn HTML Image Tag Element:<img> Tag

HTML Images

The HTML image tag is an empty tag means it does not have a closing tag. It has the following required attributes namely src & alt. The src attribute is used to provide a path of the existing image while the alt attribute shows a message when the image path is not correct or missing.

General syntax for HTML image element:

Statement
 <img src="URL of the image" alt="Specify about image">   
Statement
   <img src="https://picsum.photos/200/300" alt="This is an external image">   

This is a paragraph having an image tag also. The image can be aligned on the left side by using the CSS cascade style sheet rule. Images width and height can also adjust by a CSS rule.

Example

General Syntax

<img src="https://picsum.photos/200/300" alt="image">    

Source Code

Download
<img src="https://picsum.photos/200/300" alt="image">

Source Code : Output

image

Code Explanation

Here, the src refers to the address of the image while the alt attribute specifies the image name which will be visible when the image address is not to be correct.

Image Width And Height

Width and height can be set either by <img> width or height attributes of a CSS style.

Statement
 <img src="https://picsum.photos/200/300" width="300" height="300" alt="This is an external image" > 
   

General Syntax

<img src="https://picsum.photos/200/300" width="300" height="300" alt="This is an external image" >    

Source Code

Download
<img src="https://picsum.photos/200/300" width="300" height="300" alt="This is an external image" >

Source Code : Output

This is an external image

Code Explanation

Width and height can be set by <img> width and height attribute.

Assigning Image Width & Height Using CSS

General Syntax

<style type='text/css'>

     img{
     width:300px;
     height:300px;
     }

  </style>    

Source Code

Download
<img src="https://picsum.photos/200/300" alt="image" style="width:300px;height:300px;">

Source Code : Output

image

Code Explanation

Note: Please keep in mind that image width and height can be set using CSS.

Positioning Of Images

Images can be positioned either left or right by the CSS cascade style sheet rule.

Image:Left Alignment

General Syntax

<style type='text/css'>
  img{float:left;}
</style>    

Source Code

Download
<div class= "container  clearfix">
  <img src="https://picsum.photos/200/200" alt="image" style="float:left;">
</div>

Source Code : Output

image

Code Explanation

CSS float: The left property is used to assign the HTML element to the left of the content while float: right property is used to assign the HTML content to the right of the content.

Image:Right Alignment

General Syntax

<img src="https://picsum.photos/200/300" alt="image" style="float: right;width: 300px;height: 300px;">    

Source Code

Download
<img src="https://picsum.photos/200/300" alt="image" style="float: right;width: 300px;height: 300px;">

Source Code : Output

image

Code Explanation

Image can also be shift right to the content using CSS float: right property.

HTML Image: Link

General Syntax

<a href="https://sudhakarinfotech.com/shop" target="_blank">
   <img src="https://picsum.photos/200/300" alt="image" />
</a>    

Source Code

Download
<a href="https://sudhakarinfotech.com/shop" target="_blank">
   <img src="https://picsum.photos/200/300" alt="image" />
</a>

Source Code : Output

Code Explanation

Images link will be provided by an anchor tag <a> element. it has also a closing tag </a> and attributes href that provides the linking address of the web page.

Path Determination Of Images

Statement
 ShapeYourPath
       ext(folder)
          -images/result.png
       display.html
       another-result.png  
   

If an image exists within display.html then it's path will be.

Statement

    <img src="ext/images/result.png" alt="external image">
    <img src="another-result.png" alt="alternative image">
   

Explanation - If movement is done from parent to child folder then use forward-slash(/) for every folder.

General Syntax

<img src="ext/images/result.png" alt="external image" />
<img src="another-result.png" alt="alternative image" />    

Source Code

Download
<img src="ext/images/result.png" alt="external image" />
<img src="another-result.png" alt="alternative image" />

Source Code : Output

external image alternative image

Code Explanation

Explanation -If movement is done from parent to child folder then use forward-slash(/) for every folder.

There is also another case can be exist.

Statement
 shapeyourpath
       ext(folder)
          -display.html
          -images/result.png
       
       another-result.png 
   

Image path existing into display.html will be:

Statement

     <img src="images/result.png" alt="external image ">
    <img src="../another-result.png" alt="alternative image">
   

Please remember that, to move one directory up, you must have to use (../).

General Syntax

<img src="images/result.png" alt="external image " />
<img src="../another-result.png" alt="alternative image" />    

Source Code

Download
<img src="images/result.png" alt="external image " />
<img src="../another-result.png" alt="alternative image" />

Source Code : Output

external image alternative image

Code Explanation

Please remember that, to move one directory up, you must have to use (../).

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com