HTML Images

HTML Images: Images are ways to create an elegant appearance of the website. In this tutorial on images in HTML, we will learn all the properties of an image tag with all valid values.
Submitted by Shivang Yadav, on December 23, 2019

HTML Images

Images are visuals of something that look elegant. In web pages, images are used to create a good and appealing design.

The <img> tag is used to define images in HTML. The tag does not have a closing tag.

Syntax:

<img src="location_of_image" />

1) The src attribute in HTML

The src attribute in HTML is used to specify the location (URL or location) of the image.

Example:

<!DOCTYPE html>

<html>

<body>
    <h2>Image : src attribute</h2>
    <img src="includehelp_logo.png" />
</body>

</html>

Output

Values of src attribute

The image in the same folder as HTML: direct name is specified.
The image in another folder: the name of the folder/image_name.
The image of another server: The full address of the image is required.

2) The alt attribute in HTML

The alt attribute in HTML is used to give an alternate text to the image. This alternate text is useful when the image is not shown on the webpage (due to internet issues or errors in locating the image) or if a screen reader is being used by the user.

Syntax:

<img src="location_of_image" alt="alternate_text" />

Example:

<!DOCTYPE html>

<html>

<body>
    <h2>Image : alt attribute</h2>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" />
    <br/>
    <img src="includehelp_logo_x.png" alt="Another Logo of includehelp.com" />
</body>

</html>

Output

3) Resizing the Image: width and height Attributes

The size of the image can also be adjusted according to the programmer.

There are multiple ways in HTML to resize the image. You can do it using the style and height and width attributes.

Resizing the image using style

You can specify the height and width of the image using style,

<img src="location_of_image" alt="alternate_text" style="width:50px;height:50px;"/>

Example:

<!DOCTYPE html>

<html>

<body>
    <h2>Image : Resizing the image</h2>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" style="width:50px;height:50px;" />
    <br/>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" style="width:100px;height:100px;" />
    <br/>
    <img src="includehelp_logo.png" alt=" Logo of includehelp.com" style="width:200px;height:100px;" />
</body>

</html>

Output

Resizing the image using height and width Attribute

You can specify the height and width of the image using height and width attributes.

<img src="location_of_image" alt="alternate_text" width="50" height="50" />

Example:

<!DOCTYPE html>

<html>

<body>
    <h2>Image : Resizing the image</h2>
    <img src="includehelp_logo.png" alt="Logo of includehelp.com" width="50px" height="50px" />
    <br/>
    <img src="includehelp_logo.png" alt="Logo of includehelp.com" width="100px" height="100px" />
    <br/>
    <img src="includehelp_logo.png" alt="Logo of includehelp.com" width="200px" height="100px" />
</body>

</html>

Output

The style attribute is preferred more over height and width attributes to avoid changes by CSS.

4) Images as a Link

An image can also be used as a clickable link. For creating an image as a link, you need to put,

<a href="link"> <img src="" /> </a>

Example:

<!DOCTYPE html>

<html>

<body>
    <h2>Image : Images as a Link</h2>
    <a href="https://www.includehelp.com/">
        <img src="includehelp_logo.png" alt="Logo of includehelp.com" />
    </a>
</body>

</html>

Output

5) Floating image to a direction

You can float an image to left or right in the block of code. The float attribute is used for this task.

<img src="location_of_image" alt="alternate_text" style="float:direction;" />

Example:

<!DOCTYPE html>
<html>

<body>
	<h2>Image floating </h2>
	<p>
		<img src="includehelp_logo.png" alt="Includehelp" style="float:right;">
		Include Help is a programming website that help programmer to learn and practice programming.
	</p>
</body>

</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples