Visible Content
This paragraph is visible to the user.
Hidden Content
This is a hidden paragraph and will not be rendered by the browser.
``` ### Dynamic Toggle with JavaScript You can easily toggle the visibility of an element by adding or removing the `hidden` attribute using JavaScript: ```htmlCongratulations! You revealed the secret message.
``` --- ## Browser Support The numbers in the table below specify the first browser version that fully supports the `hidden` attribute: | Attribute | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`hidden`** | 6.0 | 11.0 | 4.0 | 5.1 | 11.1 | --- ## Important Considerations ### 1. CSS vs. the `hidden` Attribute The `hidden` attribute is a semantic way to hide elements. However, it can be easily overridden by CSS. * If an element has the `hidden` attribute but is also styled with `display: block;` or `display: flex;` in CSS, the CSS rule will take precedence, and the element **will be displayed**. * To prevent CSS overrides, you can add the following rule to your global stylesheet: ```css { display: none !important; } ``` ### 2. Accessibility (a11y) Elements with the `hidden` attribute are completely ignored by screen readers and assistive technologies. Do not use `hidden` if you want the content to remain accessible to screen readers while being visually hidden. For visual-only hiding, use CSS techniques like off-screen positioning or the `sr-only` (screen-reader-only) utility class. ### 3. Difference from `visibility: hidden` * **`hidden` attribute / `display: none`**: Removes the element from the document flow. It takes up no space on the page. * **`visibility: hidden`**: Hides the element visually, but the element still occupies its original space in the layout.
YouTip