HTML Image

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

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

Source Code: Output

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

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

Source Code: Output

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

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

Source Code: Output

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

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

Source Code: Output

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

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

Source Code: Output

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" target="_blank">
   <img src="https://picsum.photos/200/300" alt="image" />
</a>

Source Code

      
        <a href="https://sudhakarinfotech.com" 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

      
        <img src="ext/images/result.png" alt="external image" />
<img src="another-result.png" alt="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

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

Code Explanation

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

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS

HTML Image

Statement

Statement

Example

Image Width And Height

Statement

Assigning Image Width & Height Using CSS

Positioning Of Images

Image:Left Alignment

Image:Right Alignment

HTML Image: Link

Path Determination Of Images

Statement

Statement

There is also another case can be exist.

Statement

Image path existing into display.html will be:

Statement

Our Tutorials

Image path existing into `display.html` will be: