The hidden attribute on an element hides that element.
Although the element is not visible, its position on the page is maintained.
A hidden attribute on an <a> tag. The link to Google is not visible.
Click here: Google
<p>
Click here: <a hidden target="_blank"
href="https://google.com">Google</a>
</p>
The hidden attribute hides the element it is on.
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.
A hidden element is not visible, but it maintains its position on the page.
Removing the hidden attribute makes it re-appear.
Tip: The hidden attribute is a global attribute that can be applied to any HTML element.
<tag hidden >
<tag hidden="hidden" >
| Value | Description |
|---|---|
| hidden | Use 'hidden' or hidden='hidden'. Both are valid. |
This example has three <a> tags.
Clicking the button will toggle the hidden attribute on the Apple link.
<nav>
<a id="msft" target="_blank" href="https://microsoft.com">Microsoft</a> <br />
<a id="goog" target="_blank" href="https://google.com">Google</a> <br />
<a id="aapl" target="_blank" href="https://apple.com">Apple</a>
<nav>
<br />
<button onclick="toggle(this)">Hide Apple</button>
<script>
let toggle = button => {
let element = document.getElementById("aapl");
let hidden = element.getAttribute("hidden");
if (hidden) {
element.removeAttribute("hidden");
button.innerText = "Hide Apple";
} else {
element.setAttribute("hidden", "hidden");
button.innerText = "Show Apple";
}
}
</script>
The hidden attribute hides the <a> element.
When clicking the button, a JavaScript function toggles the hidden attribute.
Tip: Although the hidden attribute hides the HTML element, you should not place any sensitive information inside this element as it is still present in the page.
Aside from the hidden attribute, there are other ways to hide HTML elements.
All of these are through CSS which offers 3 different options.
In the examples below we highlight their differences.
This is the original setup with 3 colored <div> elements.
<div>
<div style="background:lavender;">This is element 1.</div>
<div style="background:cornsilk;">This is element 2.</div>
<div style="background:lavender;">This is element 3.</div>
</div>
The display:none declaration completely hides an HTML element.
It affects the page flow and surrounding elements close around the invisible tag.
<div>
<div style="background:lavender;">This is element 1.</div>
<div style="background:cornsilk;display:none;">This is element 2.</div>
<div style="background:lavender;">This is element 3.</div>
</div>
The visibility:hidden setting also hides the HTML element.
However, this does not affect page flow and the surrounding elements do not change position.
<div>
<div style="background:lavender;">This is element 1.</div>
<div style="background:cornsilk;visibility:hidden;">This is element 2.</div>
<div style="background:lavender;">This is element 3.</div>
</div>
The opacity:0 setting also hides the HTML element.
This does not affect the page flow and surrounding elements do not change position.
In addition, the hidden element continues receiving events. Click on the empty area to confirm.
<div>
<div style="background:lavender;">This is element 1.</div>
<div style="background:cornsilk;opacity:0;" onclick="alert('Hi')">This is element 2.</div>
<div style="background:lavender;">This is element 3.</div>
</div>
The hidden attribute is a global attribute that can be applied to any element.
Click on any tag for an example of that element using an hidden attribute.
| Tag with hidden | Description |
|---|---|
| <a> | Creates a link (hyperlink) to another page |
| <article> | Defines a container for independent and self contained text |
| <aside> | Creates a content area that is related to the primary content on a page |
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <button> | Creates a clickable button that can contain text or an image |
| <canvas> | Creates a graphics container where JavaScript can draw. |
| <div> | Creates a division or section on a page |
| <figure> | Displays self-contained content, usually an image |
| <footer> | Defines a footer section on a page or a section of a page |
| <header> | Defines a header section on a page or a section of a page |
| <iframe> | Creates a frame in which another web page can be embedded |
| <img> | Creates an image |
| <input> | Creates an input field in which data can be entered |
| <label> | Creates a label or brief description before input elements |
| <li> | Defines a list item. Used in <ol> and <ul> elements |
| <main> | Specifies a container for the main content of the page |
| <meter> | Creates a measurement control, like a guage |
| <nav> | Creates a container for navigation links |
| <object> | Embeds external objects in a page, such as, audio, video, image, or PDF |
| <ol> | Creates a numerically or alphabetically ordered list |
| <optgroup> | Groups related options in a <select> element (dropdown control) |
| <option> | Adds an item to a <select> element (dropdown control) |
| <picture> | Adds images with a bit more flexibility than the <img> element |
| <pre> | Displays pre-formatted text in fixed-width font -- usually computer code |
| <progress> | Creates a control that displays progress of a task |
| <section> | Defines a piece of content that can stand on its own |
| <select> | Creates a dropdown control |
| <span> | Container for one or more inline text elements |
| <svg> | Creates an vector image |
| <table> | Creates an HTML table with rows and colums, much like a spreadsheet |
| <tbody> | Marks the table body in an HTML table |
| <textarea> | Creates a multi-line text input control, for example for messages |
| <tfoot> | Marks the table footer in an HTML table |
| <thead> | Marks the header rows in an HTML table |
| <tr> | Creates a table row with either <th> or <td> elements |
| <ul> | Creates an unordered, bulleted list |
| <video> | Creates a video player on a page |
Here is when hidden support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 Edge
|
11.0 | Oct 2013 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.1 | Oct 2011 |
