Physical Address

Godawari 2 Attariya Kailali

Add a Meter image

Add an Image as a figure

Add an image as a figure

We can use the <figure> to make image that are related to the main content fo your page but that could be moved out of the main flow, (Add an Image as a figure) if needed For example in an academic article, you could ust the tag for the image, diagrams and charts that could use the tag for the image, diagrams and charts that could possibly appear in an appendiz at the end. you can add a <figcaptaion> tag inside the <figure> tag to specify a caption that describes the image.

The <figure> and <figcaption> tag are currently not well support by browsers. You can add CSS styling to help them look presentable on the page.

Add an image as a figure

Step 1: Add an image to your document using the <img> tag and src attribute. See” Insety an Image” For more details

Step 2: Type <figure> before the <img> tag

Step 3: Type</figure> after the <img> tag.

Step 4: Inside the <figure> and </figure> tags, type<figcaption> tags, type<figcaption>.

Step 5: Type the caption text.

Step 6: Type </figcaption>

Step 7: You can optionally create a style rule for the figure container using a figure selector.

Step 8 you can create astyle for the caption using a figcaption selector.

Result Output

<!DOCTYPE html>
<html>
    <Head>
        <Title>Coding thai</Title>
        <style>
            h1{
                text-align: center;
                text-transform: uppercase;
            }
            span.highlight{background-color: #ffcc99;}
            body{
                background-color: #ffffcc;
            }
           figure{
            padding: 10px;
            background-color: #cccccc;
           }
           figcaption{
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            text-align: center;
           }

        </style>
    </Head>
    <body>
        <h1>Types of Web Developer</h1> 
        <hr>
        <ol>
            <li>Frontend Developer</li>
            <li>Back-end Developer</li>
        </ol>
        <Section class="First">
            <p> <span class="highlight">A front end developer</span> has one general responsibility: 
              to ensure that website visitors can easily interact with the page.
                and Back-end developers are the experts who build and maintain the mechanisms
              that process data and perform actions on websites.</p>
        </Section>
        <figure>
        <img src="https://www.codingthai.com/wp-content/uploads/2023/01/How-To-Compile-Your-SASSSCSS-To-CSS-In-Visual-Studio-Code-1024x536.png">
        <figcaption>How to Compile your SCCS to CSS</figcaption>
    </figure>
        <hr>
       <small> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

How can I put the figure caption on the left or right side of the image?

YOu can apply the float property to the figure image, for example:

figure image{ Float: right}

This moves the image to one side and puts a caption following it on the other side. You can set the width property to the figures to keep the caption and image next to one another. For example

figure{width: 500px}

Can I put multiple images and captions inside my <figure> tag?

According the the HTML5 specification, a miximum of one <figcaption> element is allowed within the <figure> tag. But the tag can hold multiple image and even text, table, and other content.

Follow us on Social Media For More

Facebook, Instagram, Pinterest

Related Posts