Using Images in HTML

Images are often used to give visual appeal on a website. In HTML you apply an image by using theĀ <img> tag.

Here we’ll take a look at how you can apply images to your web pages and discuss all the attributes that can be used along with the image tag in HTML.

Let’s get into it!

The src Attribute

The source attribute ( src ) is used to specify the location of an image.

<img src="images/flower.jpg" />

Output:

Flower

It’s important that you specify the correct location of an image otherwise it won’t be displayed. In this case, the src is set to look for the image in a folder called “images“.

You also need to specify the image extension which in this case was .jpg. Other common extensions include .gif and .png.

The alt Attribute

The alternate attribute ( alt ) displays a text description in browsers that are unable to display the image.

<img src="images/flower.jpg" alt="Wedding Flower"/>

The title Attribute

The title attribute is used to provide information about an image. When the mouse points on or passes over the image the title is shown.

<img src="images/flower.jpg" title="Wedding Flower" />

Result:

Flower

The width and height Attributes

The width and height of an image can also be applied to an image.

<img src="images/flower.jpg" title="Hibiscus Flower" width="200px" height="100px"> />

Note: The width and height attribute can be used to resize an image. This method is however highly discouraged as the browser still has to load the originally sized image. So if a really large image is resized using width and height load time performance will be impacted. Instead, consider resizing the image using a editing program such as Microsoft Paint.

Using Images as Links

Images can also be used as links.

<a href="http://www.new2html.com"> <img src="images/flower.jpg" alt="A Hibiscus Flower" /> </a>

Result:

Wedding Flower