figure , figcaption Example
Example figure figcaption elements
The below video tutorial presents 1 complex example:
- 3 images + their caption: each marked up with figure element
- then this group of 3 images + a hyperlink nested inside another figure element whose caption is composed by:
- an image followed by
- text and
- a hyperlink on the next line
Video demonstration figure figcaption elements, example
HTML5 figure figcaption Example
| min | video details |
|---|---|
| 00:04 | video tutorial: complex example figure, figcaption |
| 00:18 | each image with its caption can be marked up using figure element |
| 00:25 | also, this group of images with its corresponding caption can be marked up using figure element |
| 00:35 | we will recreate this section of page |
| 00:43 | 'alt text here..' this text means that alternative text is required there and should be provided; to speed up things, we skipped this step, but you shouldn't! (for more details about the alt attribute on img tag, click here) |
| 01:38 | now this group of images can be nested inside another figure element whose caption will be: the notepad icon + 'Notepad++' text + the hyperlink '21 video tutorials' |
| 01:52 | adding the caption for that group of images: the notepad icon + 'Notepad++' text + the hyperlink '21 video tutorials' |
| 02:23 | we need to add the br tag in order to push the hyperlink '21 video tutorials' on the next line, otherwise the text Notepad++ and the hyperlink will display inline, and we don't want that |
| 02:40 | inside figure element we nested the a element also : '...more videos' |
| 02:50 | from this point, making the elements from the right side to display just like the ones from the left side, it's just a matter of CSS (applying CSS rules) (also, you can make the caption of each image a hyperlink like this:) <figcaption> <a href=""> install Notepad++ <⁄a> <⁄figcaption> |