html hidden attribute
The hidden attribute on the html element:
- → indicates that the 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
Examples
| <html | attribute | = | "value(s)" | > | ... | <⁄html> | example |
|---|---|---|---|---|---|---|---|
| 9. | hidden | = | "", , hidden | < hidden> ... <⁄> < hidden=""> ... <⁄> < hidden="hidden"> ... <⁄> |
Video demonstration html hidden attribute
HTML5 html hidden attribute Tutorial
| min | video details |
|---|---|
| 00:02 | launch "hidden.php" file in browser |
| 00:05 | open "hidden.php" file in Notepad++ |
| 00:11 | hidden attribute's values: , empty string, hidden |
| 00:15 | a) hidden attribute, no value , applied on html starting tag |
| 00:25 | saving the modifications in Notepad++ and refreshing the file in browser |
| 00:31 | testing: <html hidden> |
| 00:31 | result: the content of the page is hidden, is irrelevant |
| 00:34 | removing the "hidden" attribute, makes the element's content visible again |
| 00:41 | b) hidden attribute, value: empty string, applied on html starting tag |
| 00:56 | saving the modifications in Notepad++ and refreshing the file in browser |
| 01:00 | testing: <html hidden=""> |
| 01:00 | result: the content does not display in browser |
| 01:05 | c) hidden attribute, value: hidden, applied on html starting tag |
| 01:32 | saving the modifications in Notepad++ and refreshing the file in browser |
| 01:35 | testing: <html hidden="hidden"> |
| 01:35 | result: the content is hidden; Note: If the content of an HTML element is relevant and should display on page, the attribute "hidden" must not be applied on that element, in other words, the absence of the hidden attribute on an element indicates that the element's content is relevant and should display on page |