img nested within elements
Classified as: flow content, phrasing content, embedded content, interactive (if usemap attribute present) content, palpable content
Parents, img
Children, img
Examples: img parents, nesting img
| 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 | <!doctype html> <> <> <>...</> <> </> <> </> </> |
Syntax 1: Valid, img nested within p, a (if usemap attribute is absent), h1, figure: allowed
Syntax 2: Invalid, img nested within head: not allowed
Video demonstration nesting img
HTML5 nesting img, Tutorial
| min | video details |
|---|---|
| 00:07 | elements nested inside <img>; <img> nested inside elements |
| 00:17 | because <img> has no end tag (is an empty element), no html elements can be nested inside it: there's no 'inside' |
| 00:23 | but <img> can be nested inside different html elements: see teh complete list above |
| 00:25 | 1. body: nesting <img> inside <body> |
| 00:43 | the image is too large: we will add specific width and height forcing the browser to resize it Note: this is NOT considered a good practice as it affects: the quality of the image, page loading speed, and leads to unnecessary bandwidth consumption Note: Always resize your images, do not let the browser do it for you |
| 01:02 | the browser resized the image |
| 01:08 | <img> can also be nested inside: <p>, <td>, <figure>, <li>, <button> ... |
| 01:14 | 2. p: nesting <img> inside <p> |
| 01:30 | 3. td: nesting <img> inside <td>, a table cell |
| 01:42 | 4. figure: nesting <img> inside <figure> and you can add a caption for your image using the figcaption element |
| 01:55 | 5. li: nesting <img> inside <li> |
| 02:13 | 6. button: nesting <img> inside <button> |
| 00:28 | no HTML element can be nested inside img tag but the img tag can be nested inside the next elements: <p>, <td>, <figure>, <li>, <button> ... and many more |