All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML Images Side By Side With Captions

Last Updated : Mar 11, 2024

HTML Images Side By Side With Captions

In this tutorial we will show you the solution of HTML images side by side with captions, In HTML today our topic is about how we are able to place images side by side with captions.

Here, we found that we already cover the topic in which we are able to place image and text side by side.

We hope that you have done this topic. Now, our today topic is similar to that but with some minor changes.

We think that you already know what the captions are. So, we can now continue to our topic.

Step By Step Guide On HTML Images Side By Side With Captions :-

Now, here we our problem is that how to place images side by side with captions.

Captions are the lines which are written underneath the images. Mostly you see that there is line under image that tells us what the image is for and in short tells us about image.

Now, this can be done in many ways but we will show you the way which is suitable from all ways.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
       <style>
        .main{
            width: 100%;
            height: 600px;
        }
        .pics{
            width: 50%;
            height: 300px;
            float: left;
        }
        img{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="pics">
            <figure>
                <img src='demo10/logo.jpg' alt='missing' />
                <figcaption>Caption goes here</figcaption>
            </figure>
        </div>
        <div class="pics">
            <figure>
                <img src='demo10/draw.jpeg' alt='missing' />
                <figcaption>Caption goes here</figcaption>
            </figure>
        </div>
    </div>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
  4. So, both have </head> and </title> ending tags respectively. Here, css codes are displayed here, which will described in next session.
  5. Here, the content to be showed on browser’s display is written here. Here, you see that we create a class named as main with some width and height.
  6. You can customize this according to yourself. After this we create a division whose width is 50% and height you can specify to auto also. After that the main thing here is to add float property with value left.
  7. In body of html, after the two divisions, we add images in division in which we use half width and float left property. In case of caption, we just add figcaption tag along with image. You can also use span tag in this case. We hope that you understand the codes properly.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we want to say that with the help of this article we are able to align images side by side with captions also. We hope that you understand the codes properly.

Hence, according to this we will also give the solution of how to align images and text side by side with caption in case of images. I hope this tutorial on HTML images side by side with captions helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪