HTML Images

Web page can appear better with images. So in this chapter, you will learn how to display images in HTML and about different attributes to customize it.

HTML IMG Tag

For inserting pictures into our web page, we can use the <img> tag.  The <img> tag is an empty tag which mean it has no ending tag (i.e. no </img>) associated with it. The syntax of using <img> tag is:

<img src = "path or URL" alt = "alternate_text or image replacement text">

The SRC attribute of IMG tag

This attribute helps in specifying the image's source, which means this, instruct your web browser from which location it must fetch the particular picture (in other words specify the path). SRC attribute takes path or URL as its value in quotes.

The source's image may exist locally on your computer (need a path to specify) or may reside somewhere in web server (need URL to specify). For images in your local PC, wither you have to set the entire path or bring that particular image's copy in a particular folder in which your .html file (in which you want to add image) is also residing.

For image path residing over the internet in some other webpage, you have to use URLs like this:

<img src="http://example.com/wallpaper.jpg" alt="Wallpaper">
Output:

Wallpaper

The alt attribute

This attribute of Image Tag or <img> tag allows you in defining an alternative text in case your browser becomes unsuccessful in loading the image. There may be situations when your browser might not able to display that particular image either because of slow connection or server error or any other reason. Moreover, search engines take up those alternate texts given to images and help to find articles or content related to that text.

<img src= "ganesh.jpg" alt ="Lalbaugcha Raja">

The border attribute

The default value of border is assigned as "0px" to each and every image. For displaying the borders all around the image, you have to implement the border attribute of IMG tag. Here's the example of how it needs to be applied:

<img src="guitar.jpg" height="30px" width="30px" border="6">

The hspace attribute

Hspace attribute is used for providing horizontal spacing all around your image. It takes value in the form: 20 or 20%.

The vspace attribute

Vspace attribute is used for providing vertical spacing all around your image. It also takes value in the form: 20 or 20%. Both these attributes are used in situations where you want to maintain some gapping between your image and text.

Height and Width

In case you will need a specific size of the image for fitting it into your web page, you can use the height and width attribute of IMG tag. Here's an example:

<img src="guitar.jpg" height="40px" width="80px">
<br/>
<img src= "guitar.jpg" title= "Forest" height="25%" width="30%">

You can use both px (pixels) and % (percent) as a relative unit for specifying size (here height and width) of the image.


Courses
Subscribe Updates via Email

Join 49,000+ W3schools lovers and get all the latest tutorials, programs, algorithms in your inbox.