W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

caption ... ⁄caption

Share it

caption intro caption browser display caption parents - children caption vs figcaption caption syntax

HTML5 caption element

The caption element allows you to add a title to your table. »video

About caption

Display & support caption

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children caption

The caption element is the first optional element inside table element (table's first child).

Attributes caption


The difference between caption and figcaption elements: »video

Syntax caption

1<caption> ... </caption> »video

Attributes and Values caption (comma separated)

<captionattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<caption accesskey="h"> ... </caption>
2.class=class name»html »img<caption class="class_name"> ... </caption>
3.contenteditable="",  , true, false »html<caption contenteditable="true"> ... </caption>
4.contextmenu=menu id value»html<caption contextmenu="menu_id_value"> ... </caption>
5.data-*= value -<caption data-http-error="404"> ... </caption>
6.dir=ltr, rtl, auto»html<caption dir="ltr"> ... </caption>
7.draggable= true,  , false»img<caption draggable="false"> ... </caption>
8.dropzone= copy, move, link, string:, file: -<caption dropzone="copy"> ... </caption>
9.hidden= "",  , hidden»html »img<caption hidden="hidden"> ... </caption>
10.id=id name»html »img<caption id="unique_id_name"> ... </caption>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<caption lang="en"> ... </caption>
17.spellcheck="",  , true, false»html<caption spellcheck="true"> ... </caption>
18.style=CSS property:value»html »img<caption style="color:red"> ... </caption>
19.tabindex= integer »img<caption tabindex="3"> ... </caption>
20.title=text»html »link»style »abbr»dfn
»img »meter
<caption title="html page"> ... </caption>
21.translate="", yes, no»html »img<caption translate="yes"> ... </caption>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration caption element

HTML5 caption element: mark up the table caption

min video details
00:05 video tutorial: caption element allows you to add a caption (a title) to your table
00:10 this table has no caption → it's ok since caption element is optional
00:16 a table with no caption
00:21 adding a caption to our table
note: caption if present must be the first child of table element
00:33 caption (title) added; displays above the table

For more information about the caption element, please see the specs: W3CWHATWG