w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

figcaption ... ⁄figcaption, display in browser

Browser display, figcaption element

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>))
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%
figcaption intro figcaption parents - children figcaption vs captionfigcaption syntax