9 Demos to Learn HTML img tag With src, alt and CSS

9 Demos to Learn HTML img tag With src, alt and CSS

The <img> tag of HTML

The <img> tag of HTML is used to include the images in your web pages. You may specify the source of an image in the img src attribute along with alternative text in the alt attribute.

The alt attribute is useful in case image is not available or web browser is not able to pull the source image. Different kinds of images can be used in the HTML img tag e.g .jpg, .gif, .png etc.

Syntax of using the img tag

<img src=”image path” alt=”Alternative text” height=”” width=”” />

Where:

  • src: specifies the image path which is mandatory. This can be the relative or the absolute path.
  • img alt: alternative text.
  • Height and width that specify image dimensions

Note that, the <img> tag is closed by a forward slash followed by “>”. You do not need to close it like many other tags like </div>, </p> or </span>.

A few img tag examples

img src path example

img alt example

HTML image link example

CSS img src example

A Video demonstration of img tag

The src attribute in <img> tag

In the src attribute of the <img> tag, you can specify the relative path. For example:

<Img src = “images/image.png”/>

It will be taken as http://www.domain.com/currentpage/images/image.png

Alternatively, you can specify the absolute path like this:

<Img src = “http://www.domain.com/currentpage/images/image.png”>

If you are using images from the same domain then you should use the relative path. If you are using the third party images or images from other URL then specify the absolute path.

See example below with relative and absolute path:

HTML img tag

Experience this online

The alt attribute

The alt stands for the alternative text. This is quite useful for SEO purpose as well, for example, in the Google search for images. Also, if somehow the image is not displayed, due to the user’s slow internet connection or some other reason, the img’s alt text will be displayed. This is how you can use the alt attribute in the <img> tag:

<Img src = “images/image.png”/ alt=”website logo”/>

See the following example:

Experience this online

HTML img size

You can specify the image size in the img HTML tag. Specify height and width as needed and according to the layout of the web page. See following examples of setting the height and width attributes of the img tag.

The img width example

The example below sets the image width by using the width attribute of the img tag.

Experience this online

Setting the height example

The following example sets the image height in the img tag by using the height attribute.

Experience this online

HTML image link

The example below shows how to link an image to another web page.

Experience this online

To learn more about image links, go to its chapter.

The image border example

You can specify the image border that will occupy the given image by using the border attribute. The border attribute is deprecated in HTML 5. An example of using the border attribute in the <img> tag is shown below:

HTML img border

Experience this online

Using CSS with img tag

You can use CSS inside the <img> tag. One way is to use the style attribute inside the <img> tag. Other is to write the external CSS and include CSS in img tag by class name or id or define img properties inside the CSS file or block.

An img CSS example with CSS class

The example below shows using the CSS class with CSS properties and assigning it to the img’s class attribute. The properties include height, width, border in the CSS class.

Experience this online

CSS img with style attribute

The example below uses the Style attribute with the same CSS properties.

HTML img css

Experience this online

Specify source path in CSS

You can even specify image source in the CSS rather in the img src attribute. The example below shows how you can do this:

Experience this online

Also see HTML forms | HTML href