How to add image in HTML

HTML Images are used to make the webpage more appealing by improving the visual look of the HTML page to show the complexities of the HTML text in an interesting and colorful manner by adding images to the webpage. Let us understand HTML Images in detail.

Syntax of HTML Images

<img src=”URL” alt=”some_text”>

The <img> tag is used to Link the image on the webpage with the appropriate Attributes used, and it does not have a closing tag.

src Attribute: it is defined as a source attribute it locates the path of the Image URL which is to be displayed on the webpage.

alt Attribute: it is defined as alternative text which describes the image as text if it shows error or does not pop up on the display.

Features of HTML Images

  • HTML Images use different attributes to design and adjusting the fonts.
  • HTML Images also use different types of file extensions for changing the quality of Images for eg:  .jpg/jpeg, .gif , .png.
  • HTML Images also uses style attribute to maintain the font of the image.
  • HTML Images helps more in search engine optimization if setting the filename relevant to the image displayed.

Basic Example of HTML Image

<!DOCTYPE html>
<html>
  <head>
    <title>Image in Webpage</title>
  </head>

  <body>
    <p>basic example of HTML Images</p>
    <img src="codedecpage.png" alt="Test Image" />
  </body>
</html>

 

output: 

Use of Image Tag in HTML

1. Style Attributes:  It helps in changing the size of the image by using width and height attributes as per requirement.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p> style attribute to specify the width and height of an image:</p>

<img src="my desktop background resized.png" alt=" desktop mountain background" style="width:200px;height:200px;">

</body>
</html>

 

output :

 

2.  Link Attributes: It is used to add a URL link with other page by using  <img> tag inside <a> tag.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="https://codedec.com/">
<img src="study.jpeg" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>

output:  clicking on the emoji will lead to the server of the link.

  The server of Codedec is now displayed.

 

3. Align Attribute:   It helps to set the location of the image in the right, left, or the centre of the webpage.

Example:

<!DOCTYPE html> 
<html> 

<head> 
  <title>alignment of image by  "img" tag</title> 
</head> 

<body> 
  <p>USING IMG <img> tag:</p> 
  <img src= "logo.png"
  alt="codedec logo" align="left"> 

</body> 

</html> 

 

output: