img hidden attribute
The hidden attribute on the img element:
- → indicates that the embedded image through img element is no longer relevant and can be hidden
- is a global attribute → can be applied on all html elements;
- when applied on the root element <html>, its value is inherited by all other html elements → the content of the HTML document is no longer relevant, thus can be hidden
Examples
| <img | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 9. | hidden | = | "", , hidden | < src="image.jpg" alt="alt text" hidden> < src="image.jpg" alt="alt text" hidden=""> < src="image.jpg" alt="alt text" hidden="hidden"> |
Video demonstration img hidden attribute
HTML5 img hidden attribute Tutorial
| min | video details |
|---|---|
| 00:03 | video tutorial: hidden attribute on img |
| 00:10 | 3 img elements on page |
| 00:15 | let's say the 2nd one is no longer relevant for the current page → user agents should not display it |
| 00:29 | the 2nd image has been hidden |
| 00:33 | the hidden attribute accepts as values: 1. "" (the empty string) 2. hidden (its canonical name) |
| 00:46 | if an element is relevant for the current page, hidden attribute must NOT be present on that element |