Figure and Figcaption in HTML5
The <figure> and <figcaption> elements are used to group images with captions, giving better semantic meaning to the content.
Syntax & Example:
<figure>
<img src="sunset.jpg" alt="Sunset View" width="400">
<figcaption>Beautiful Sunset at the Beach</figcaption>
</figure>-
<figure>acts as a container for the image and its caption. -
<figcaption>provides a descriptive text that relates to the image.
Image Maps in HTML
Image maps allow you to make different areas of an image clickable.
Syntax & Example:
<img src="worldmap.jpg" usemap="#worldmap" alt="World Map" width="600">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA">
<area shape="circle" coords="500,80,60" href="india.html" alt="India">
</map>Image Alignment and Positioning in HTML
You can align images left, right, or center on a webpage using CSS.
Align Left
Image floats to left, text flows around it.
Example :
<img src="nature.jpg" alt="Nature Image" style="float: left; margin-right: 10px;">
<p>This text will wrap around the image on the right side.</p>Align Right
Image floats to right, text flows around it.
Example :
<img src="nature.jpg" alt="Nature Image" style="float: right; margin-left: 10px;">
<p>This text will wrap around the image on the left side.</p>Align Center
Image stays in center of page.
Example :
<div style="text-align: center;">
<img src="nature.jpg" alt="Nature Image">
</div>Complete HTML example focusing only on Advanced Image Features:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Image Features in HTML</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h2 {
color: #2c3e50;
margin-top: 30px;
}
figure {
margin: 20px 0;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
}
.align-left {
float: left;
margin: 10px;
width: 200px;
}
.align-right {
float: right;
margin: 10px;
width: 200px;
}
.center {
display: block;
margin: 20px auto;
width: 300px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h1>Advanced Image Features in HTML</h1>
<!-- 1. Figure & Figcaption -->
<h2>1. Figure & Figcaption</h2>
<p>The <code><figure></code> and <code><figcaption></code> elements are used to group images with captions for better semantic meaning.</p>
<figure>
<img src="images/sunset.jpg" alt="Sunset View" width="400">
<figcaption>Beautiful Sunset at the Beach</figcaption>
</figure>
<!-- 2. Image Maps -->
<h2>2. Image Maps</h2>
<p>Image maps allow you to define clickable areas within an image that link to different URLs.</p>
<img src="images/worldmap.jpg" usemap="#worldmap" alt="World Map" width="600">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA">
<area shape="circle" coords="500,80,60" href="india.html" alt="India">
<area shape="poly" coords="300,200,350,250,400,200" href="brazil.html" alt="Brazil">
</map>
<!-- 3. Image Alignment & Positioning -->
<h2>3. Image Alignment & Positioning</h2>
<p>Images can be aligned using CSS for better layout and design.</p>
<div class="clearfix">
<img src="images/photo1.jpg" alt="Aligned Left" class="align-left">
<p>This image is floated to the left. Text wraps around the image to demonstrate how floating works. You can also use margins to create spacing between text and image. Floating images is useful for magazine-style layouts or articles.</p>
<img src="images/photo2.jpg" alt="Aligned Right" class="align-right">
<p>This image is floated to the right. Similarly, text wraps around the image to create a visually appealing layout. CSS float allows flexible positioning without breaking the flow of text.</p>
</div>
<p>Centering an image:</p>
<img src="images/photo3.jpg" alt="Centered Image" class="center">
</body>
</html>