what is caption tag in html

what is caption tag in html

- December 08, 2025

what is caption tag in html

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>

 <h1>The caption element</h1>
 .
 .
 .
 </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

Comments