Home »
HTML
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
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
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.
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
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
