hidden attribute which has the same affect as the CSS display: none declaration.
An element will not be displayed if the hidden attribute is used regardless of its value:<div hidden>
<!-- This will disappear from the screen -->
</div>display: none declaration and hidden attribute work in the same way. But the hidden attribute provides better semantic. display: none works in the old browsers, but hidden isn't supported natively in IE 10 and below.[hidden] {
display: none;
}display property to something else (such as display: flex) will override the behavior
of the hidden attribute. !important:[hidden] {
display: none !important;
}