figcaption ... ⁄figcaption, display in browser
Browser display, figcaption element
- empty figcaption element (start tag, end tag only): does not display in browser
- its children, flow content: the display depends strictly on the nested element
- its content, type text: displays block in browser
Display type: block
Video demonstration figcaption element, view in browser
HTML5 figcaption, browser display, Tutorial
| min | video details |
|---|---|
| 00:05 | video tutorial: testing the browser display of the figcaption element |
| 00:19 | empty figcaption element (start tag, end tag, only) does not display in browser |
| 00:30 | the content, type text, of the figcaption element displays in browser |
| 00:39 | non-empty figcaption element displays block in browser (block = on a new line; the browser adds a line before and after it (line break <br>)) |
| 00:44 | example: adding simply text after figcaption and the text is not displayed in line with the text of the figcaption element, but it is pushed on the next line, because browsers consider a <br> before and after a block element: e.g. <br><figcaption> MySQL Server Connection code: <⁄figcaption><br> |
| 00:59 | test result ok: the text 'text' is pushed on the next line because of the figcaption block element |
| 01:14 | we added a CSS rule to figcaption and figure element to highlight them |
| 01:22 | the yellow part: the figcaption element with its content (type text) inside |
| 01:29 | the red part: the flow content (pre element) after figcaption element |
| 01:36 | the yellow + red part: the figure element (with its children: figcaption and pre) |
| 01:44 | by default, block elements (e.g. figcaption) take the width of their container (figure element), but through a CSS rule we can change that (= the width of a block element), in this case, from 100% to 70% |
| 01:55 | 1 more example: changing figcaption's width, from 70% to 10% |