figure , figcaption Examples
3 Examples: figure figcaption elements
The below video tutorial presents 3 simple examples:
- a block quotation with its caption: nested inside
- a verse with its caption: nested inside
- a fragment of php code with caption: nested inside
Video demonstration figure figcaption elements, examples
HTML5 figure figcaption Examples
| min | video details |
|---|---|
| 00:05 | video tutorial: 3 simple examples, figure and figcaption elements |
| 00:18 | 1st example: a quotation and its author - the quotation displays block: can be marked up with blockquote element; - its author represents the caption: can be marked up with figcaption element, inside figure element |
| 00:48 | 2nd example: a stanza, the poem and its author - the stanza: can be marked up with p element; - the name of the poem and its author represent the caption: can be marked up with figcaption element, inside figure element |
| 01:25 | we cited the name of a work = the name of the poem → can be marked up with cite element |
| 01:42 | 3rd example: a fragment of code and its caption - the fragment of code: can be marked up with code element nested inside pre; - the caption: can be marked up with figcaption element, inside figure element |
| 02:26 | in order to Keep the same display of this php code in browser as it is in the source code, we will use the pre tag |
| 02:33 | the 3 examples: - a quotation, a stanza and a fragment of code, all marked up with their corresponding HTML element (part of flow content) and then nested inside figure element - plus their caption, marked up with figcaption element, nested inside figure element |