HtmlCssMonk

Images in HTML | Learn Basic HTML

student, woman, startup

Images are an important part of a web page as they beautifies it and makes complex concepts easy to understand.

Simple Image in HTML

<img> tag is used to insert any image in your web page. Following is the syntax with it’s attributes –

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <img src = "/html/images/htmlcssmonk.png" alt = "Website logo" />
   </body>
	
</html>

This Code will produce the following result on your webpage –


Attributes of <img> tag

There are 4 attributes of <img> tag –

  1. src – It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of image may be on the same directory or another server.
  2. alt – The alt attribute defines an alternate text for the image, if it can’t be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.
  3. width – It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.
  4. height – It specifies the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.

Use of height and width attribute with img tag

Now let’s learn how to use height and width attribute .

<img src="sherlock.jpg" height="540" width="900" alt="sherlock and dr. watson">  

This Code will produce the following result on your webpage –


Next topic – Tables in HTML

Previous topic – Formatting in HTML


Leave a Comment

Your email address will not be published. Required fields are marked *