×

HTML Tutorial

HTML Practice & Useful Resources

HTML Images

By IncludeHelp Last updated : October 13, 2024

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" />

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

HTML Image Tag | Example 1

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.

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

HTML Image Tag | Example 2

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

HTML Image Tag | Example 3

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

HTML Image Tag | Example 4

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

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

HTML Image Tag | Example 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

HTML Image Tag | Example 6

Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.