HTML - attributes - hidden

revision:

Content

"hidden" attribute: a boolean attribute that can hide elements. syntax some examples

"hidden" attribute: a boolean attribute that can hide elements.

top

When present, it specifies that an element is not yet, or is no longer, relevant. Browsers should not display elements that have the hidden attribute specified.

The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the hidden attribute, and make the element visible.
The hidden attribute is a global attribute, and can be used on any HTML element. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers. A hidden element is not visible, but it maintains its position on the page.

syntax

top

<element hidden></element>

<element hidden="hidden"></element>

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

some examples

top

This content should be read right now, as it is important. I am so glad you are able to find it!

codes: 
                    <p class="spec">This content should be read right now, as it is important.  I am so glad you are able to find it!</p>
                    <p hidden>This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

Welcome to Foobar.com!

By clicking "OK" you agree to be awesome every day!

codes: 
                    <div style="margin-left:3vw;" id="welcome" class="panel">
                        <h3>Welcome to Foobar.com!</h3>
                        <p class="spec">By clicking "OK" you agree to be awesome every day!</p>
                        <button style="margin-left:3vw;" class="button" id="okButton">OK</button>
                    </div>
        
                    <div style="margin-left:3vw;" id="awesome" class="panel" hidden>
                        <h3>Thanks!</h3>
                        <p class="spec">Thank you <strong>so</strong> much for agreeing to be awesome today! Now get out there and 
                        do awesome things awesomely to make the world more awesome!</p>
                    </div>
                    <script>
                        document.getElementById("okButton")
                                .addEventListener("click", function() {
                            document.getElementById("welcome").hidden = true;
                            document.getElementById("awesome").hidden = false;
                        }, false);
                    </script>