🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

📖 INDEX

# helloworld
# comments-html
# html-tag
# head-tag
# body-tag
# p-tag
# b-tag
# i-tag
# strong-tag
# em-tag
# s-tag
# cite-tag
# blockquote-tag
# sub-tag
# sup-tag
# u-tag
# big-tag
# tt-tag
# pre-tag
# q-tag
# code-tag
# samp-tag
# var-tag
# abbr-tag
# acronym-tag
# address-tag
# ins-tag
# strike-tag
# span-tag
# hr-tag
# title-tag
# meta-tag
# base-tag
# link-tag
# a-tag
# script-tag
# noscript-tag
# style-tag
# div-tag
# h1-tag
# h2-tag
# h3-tag
# h4-tag
# h5-tag
# h6-tag
# ul-tag
# ol-tag
# li-tag
# dl-tag
# dt-tag
# dd-tag
# menu-tag
# dir-tag
# table-tag
# tr-tag
# th-tag
# td-tag
# thead-tag
# tbody-tag
# tfoot-tag
# caption-tag
# col-tag
# colgroup-tag
# form-tag
# input-tag
# textarea-tag
# select-tag
# option-tag
# button-tag
# label-tag
# fieldset-tag
# legend-tag
# datalist-tag
# optgroup-tag
# radio-buttons
# checkboxes
# submit
# reset
# input-types
# input-attributes
# meta-tags
# open-graph
# twitter-cards
# geotagging
# img-tag
# video-tag
# audio-tag
# iframe-tag
# map-tag
# area-tag
# object-tag
# param-tag
# applet-tag
# controls
# autoplay
# loop
# muted
# poster
# src
# type
# javascript-in-html
# basefont-tag
# bdo-tag
# font-tag
# frame-tag
# frameset-tag
# noframes-tag
LOADING ENGINE...

<caption>

AI & DATA SCIENCE // caption-tag

The <caption> element provides a title or explanation for a table, and must be the very first child of <table> to be valid.

Syntax

<table>
  <caption>Monthly Expenses</caption>
  <tr><th>Category</th><th>Amount</th></tr>
</table>

Deep Dive Course

**`<caption>`** is the table's equivalent of a figure caption or heading — it must appear as the FIRST child directly inside `<table>` (before `<thead>`/`<tr>`) and browsers render it centered above the table by default. Screen readers announce the caption when a user navigates into the table, giving immediate context for what the data represents — much more reliably than a nearby `<h2>` or `<p>` that isn't structurally tied to the table itself.

1Understanding <caption>

`<caption>` is the table's equivalent of a figure caption or heading — it must appear as the FIRST child directly inside <table> (before <thead>/<tr>) and browsers render it centered above the table by default. Screen readers announce the caption when a user navigates into the table, giving immediate context for what the data represents — much more reliably than a nearby <h2> or <p> that isn't structurally tied to the table itself.

💡

A <caption> is more accessible than putting a heading right before the <table> in the markup, because it's programmatically tied to the table itself — a screen reader announces it specifically as that table's caption, regardless of where the user enters the table.

editor.html
<table>
  <caption>Top 3 Programming Languages, 2026</caption>
  <tr><th>Rank</th><th>Language</th></tr>
  <tr><td>1</td><td>JavaScript</td></tr>
</table>
localhost:3000

2Practical Example

Here is a real-world application of <caption> showing how it is used in production HTML.

editor.html
<!-- Styling the caption's position with CSS -->
<style>
  caption { caption-side: bottom; font-style: italic; }
</style>
<table>
  <caption>Source: internal sales data</caption>
  <tr><td>...</td></tr>
</table>
localhost:3000

3Best Practices

Follow these guidelines when working with <caption>:

1. Add a <caption> to any table where the data's purpose isn't already obvious from surrounding context

2. Place it as the very first child of <table> — it's invalid anywhere else

3. Keep it a concise title, not a lengthy explanation (put longer notes in a <p> instead)

⚠️

Tip: A <caption> is more accessible than putting a heading right before the <table> in the markup, because it's programmatically tied to the table itself — a screen reader announces it specifically as that table's caption, regardless of where the user enters the table.

editor.html
<table>
  <caption>Top 3 Programming Languages, 2026</caption>
  <tr><th>Rank</th><th>Language</th></tr>
  <tr><td>1</td><td>JavaScript</td></tr>
</table>
localhost:3000

Examples

Example 01Basic Usage
<table>
  <caption>Top 3 Programming Languages, 2026</caption>
  <tr><th>Rank</th><th>Language</th></tr>
  <tr><td>1</td><td>JavaScript</td></tr>
</table>
Example 02Advanced Example
<!-- Styling the caption's position with CSS -->
<style>
  caption { caption-side: bottom; font-style: italic; }
</style>
<table>
  <caption>Source: internal sales data</caption>
  <tr><td>...</td></tr>
</table>

Best Practices

  • Add a to any table where the data's purpose isn't already obvious from surrounding context
  • Place it as the very first child of — it's invalid anywhere else
  • Keep it a concise title, not a lengthy explanation (put longer notes in a

    instead)

    • Interview Question

    Why is <caption> more accessible than just placing a heading before the <table> element?▼

    Hint: Think about the programmatic relationship between a caption and its table, versus a nearby but unconnected heading.

    <caption> is a direct child of <table> and is part of the HTML accessibility tree's relationship with that specific table, so screen readers announce it explicitly as 'caption' for that table whenever a user navigates into it, no matter how they entered it (e.g. jumping directly via a table shortcut). An <h2> placed visually right before the table has no such structural connection — a screen reader has no guaranteed way of knowing that heading describes the table that happens to follow it in the DOM.

    Exercises

    EasyPractice using <caption> in a real scenario.
    View Solution
    <table>
  <caption>Top 3 Programming Languages, 2026</caption>
  <tr><th>Rank</th><th>Language</th></tr>
  <tr><td>1</td><td>JavaScript</td></tr>
</table>

    Frequently Asked Questions

    Why is <caption> more accessible than just placing a heading before the <table> element?▼

    is a direct child of and is part of the HTML accessibility tree's relationship with that specific table, so screen readers announce it explicitly as 'caption' for that table whenever a user navigates into it, no matter how they entered it (e.g. jumping directly via a table shortcut). An

    placed visually right before the table has no such structural connection — a screen reader has no guaranteed way of knowing that heading describes the table that happens to follow it in the DOM.

    Related Functions

    table-tag