ad

Monday, December 8, 2025

what is caption tag in html

what is caption tag in html

web designing theory

This Blog You Will Learn 

ஃ What is the <caption> tag 

ஃ Why the <caption> tag important.

ஃ Why USe The <caption> tag

ஃ Syntax of HTML <Caption> tag

ஃ Explain Program

ஃ Output

What is the <caption> tag 

 ✅ html <caption> tag defines title or caption of a table.

 ✅ HTML <caption> tag is semantic table element use to define a title or description for an HTML table. 

✅ HTML <caption> tag provides a descriptive title for a HTML table and must be placed immediately aften the openning <table> tag.

✅ HTML <caption> element must be the first child of the <table> element.

✅only one <caption> is allowed per table.

✅ The <caption> tag is used to add a title to an HTML table.

✅ Use <caption> tag appears label for table and helps explain what the table contains.

✅ Useful tables are large or complex caption.

✅ HTML <caption>  tag must be first child of the <table> element.

Why the <caption> tag important.

✔ <caption> tag is read before the table content.

✔ helps visually impaired users understand table context.

✔ improves navigation through structured data.

✔ help SEO understand table data.

✔ improves code readability. 

Why USe The <caption> tag

 1) Improve Clarity.

 2)  Accessibility. 

3) semantic HTML.

 Syntax of HTML <Caption> tag

<caption>.......</caption>

what is caption tag in html

Example 


<!DOCTYPE html>
<html>
  <head>
    <title> HTML Caption tag</title>
    <style>
table, th, td {
  border: 1px solid black;
}
</style>
  </head>
  <body>
    <h2> HTML Caption element</h2>
    <table>
    <caption>Student information</caption>
    <tr>
      <th>Name</th>
      <th>class</th>
          </tr>
           
          <tr>
            <td>Radha</td>
           <td>BCA</td>
          </tr>
         <tr>
          <td>Seeta</td>
          <td>MCA</td>
         </tr>
       </table>
  </body>
</html>

what is caption tag in html

Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>
     
  <title> HTML iframe tag </title>
<style>
table, th, td {
  border: 1px solid black;
}
</style>

    </head>

  •   <head>  section 
  •   head section contains metadata about page. not visible on the page itself.
  •  <title> tag  title section set the title of the page shows the browser tab.

             CSS Styling  directly in HTML.

  • 1px solid black border.
  •  <table>   :-    table 
  •  <th>       :-    table headers
  • <td>        : -   table data cells

Step 4]

<body>

.
.
.
 </body>

  • <body> body contains the visible content webpage.
  • html <h1> tag  heading  

Step 4]

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<table>

  • html <table> tag define table.
  • table tag all row(<tr>) and cells ( <th> or <td> ) inside table tag.

   <caption>Monthly savings</caption>

  • html  <caption> tag  title description for table.
  • browser display  above table.

Step 5]

<tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>

  •   <tr>  :- table row.
  • <th>  :- table header cell.
  • <th> tag  use data bold and centered.
  • row is header row for table column.

Step 6]

<tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>

  •  html <tr> tag   :-   represents a row of data.
  • html <td> tag   :-   table data cell .

Step 7]

closing the Tag


</table>
</body>
 </html>

what is caption tag in html
Output

what is caption tag in html


Related Post :-

how to set image height

html link tag explain

how to use pre tag

Labels: ,