Images in HTML
What is an Image in HTML?
In HTML, the <img> element is used to display images on a webpage. Images are an essential part of web design, providing visual context, enhancing information, and making websites more engaging for users.
Why Use Images in HTML?
Images are used in HTML to:
- Visually represent ideas or information.
- Make content more attractive and engaging.
- Illustrate concepts that may be difficult to explain with text alone.
- Enhance user experience and improve interaction.
Examples of Using Images in HTML
1. Image with Width and Height
You can control the size of an image by setting the width and height attributes.
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Images Page</title>
</head>
<body>
<img src="Birds.jpg" alt="Description of the image">
</body>
</html>
Output
2. Linking an Image
You can make an image clickable by wrapping it in an anchor (<a>) tag.
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Images Page</title>
</head>
<body>
<a href="https://aitaurangabad.com/"><img src="logo.png" alt="Clickable Image"></a>
</body>
</html>
Output
3. Image with Hover Effect
You can apply a CSS hover effect to change the image style when hovered.
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Images Page</title>
</head>
<body>
<style>
.hover-image:hover { opacity: 0.7; }
</style>
<img src="Rabit.jpg" alt="Hover Effect Image" class="hover-image">
</body>
</html>
Output
Conclusion
Images in HTML enhance user engagement by providing visual context. By utilizing various image techniques, you can create visually appealing and functional webpages that enrich the user experience.