Learn Basic HTML Complete Course part 10

2 min read

HTML Image


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

Let's see an example of HTML image.

Attributes of HTML img tag

1) src

It is a necessary attribute that describes the source or fileName 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 h4 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.

Example

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 

    <body> 
        <h1>Example of src attribute</h1> 
        <p>HTML images can be diplayed with the help of image tag and
its attribute src gives the sourc for that image</p>
       
        <img src="../image/img98.png" height="200" width="300">
    </body> 
</html>  

output:

Example of src attribute

HTML images can be diplayed with the help of image tag and its attribute src gives the sourc for that image

😊 
Your Image will be displayed here 😊

Always try to insert the image with height and width, else it may flicker while displaying on webpage.


How to get image from another directory/folder?


To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this:

<img src="E:/images/animal.png" height="180" width="300">

In above statement we have put image in local disk >> images folder >>  topblogpk.png or anyname.png as you have.

If src URL will be incorrect or misspell then it will not display your image on web page, so try to put correct URL.



You may like these posts

  • HTML ImageHTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.Let's s…
  • HTML Ordered List | HTML Numbered ListHTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered lis…
  •  Introduction of HTMLHTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. 🔹HTML is a text formatting language.URL – Uniform Resource Locat…
  • HTML Formatting TagsHTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatt…
  • HTML ElementsAn HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a sta…
  • HTML LayoutsHTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the we…

Post a Comment