caption ... ⁄caption vs figcaption ... ⁄figcaption
caption Element vs figcaption Element
| <caption> ... <⁄caption> | <figcaption> ... <⁄figcaption> |
|---|---|
| 1. Nested | 1. Nested |
| HTML element, child of a table element | HTML element, child of a figure element |
| 2. Utility | 2. Utility |
| gives the caption of that table element | gives the caption of all elements nested inside that figure element |
| NOTE1: avoid double caption: when table element is the only element inside figure, except figcaption, of course, the figcaption will give the caption of the table; caption inside table should be omitted in order to avoid a double caption: see the syntax below: Syntax 1: not ok double caption given by caption and by figcaption Syntax 2: ok, only one caption given by figcaption | |
| NOTE2: double caption ok : when table element is NOT the only element inside figure, except figcaption, of course, in which case the figcaption will represent the caption of all the elements inside figure (table element included too), while caption element inside table element will give the caption of that table; see the syntax below: Syntax 3: ok double caption allowed: figcaption for all elements, caption for table only | |
Examples caption, figcaption
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <> <> <>...</> </> <> <> <> ...</> <> <> ...</> ... </> </> </> </> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <> <> <>...</> </> <> <> <> ...</> <> <> ...</> ... </> </> </> </> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html> <> <> <>...</> </> <> <> <> ...</> ... <> <> ...</> ... </> <> <> ...</> ... </> </> </> |
Video demonstration caption vs. figcaption
HTML5 caption vs. figcaption Tutorial
| min | video details |
|---|---|
| 00:05 | video tutorial: caption versus figcaption |
| 00:10 | taking this example: figure element with the following elements nested inside it: figcaption, p, img, table |
| 00:26 | figcaption is a child of figure element |
| 00:30 | caption is a child of table element |
| 00:38 | table's caption (caption) gives the caption of the table |
| 00:46 | figure's caption (figcaption) gives the caption of all elements nested inside figure element |
| 01:07 | thus, we have 2 captions: - 1 for all the elements inside figure element (table included) AND - 1 for the table only |
| 01:12 | note: table is not the only element inside figure element, except figcaption: there's also table, img, p |
| 01:17 | test: let's say table is the only element inside figure element, except figcaption: removing table, img, p |
| 01:28 | the content of the 2 captions should be the same since there's only table element inside figure element → figcaption and caption, both elements give the caption of the table |
| 01:41 | in such cases, only 1 caption should be kept and that's the caption of the figure element given by the content of the figcaption element |
| 01:50 | 2 captions = repetition = nothing new → 1 can be removed |
| 02:04 | 1 table inside figure → 1 figcaption & 0 caption |