Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
A hidden attribute on a <span> tag hides the span element.
Although the span is not visible, its position on the page is maintained.
A hidden attribute on a <span> tag.
The span element is not visible.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
<article>
<p style="max-width:610px;">
<span hidden style="background:moccasin">Did you know?</span>
The Great Pyramid of Giza was the tallest building in the world
for over 3,800 years, until the construction of the Lincoln
Cathedral in the UK in 1311.
</p>
</article>
The hidden attribute hides the <span> element.
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.
A hidden <span> element is not visible, but it maintains its position on the page.
Removing the hidden attribute makes it re-appear.
<span hidden>
<span hidden="hidden">
Value | Description |
---|---|
hidden | Use 'hidden' or hidden='hidden'. Both are valid. |
Clicking the button toggles A hidden attribute on the <span> element.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
<article>
<p style="max-width:610px;">
Did you know? The Great Pyramid of Giza
was the tallest building in the world for
<span id="myspan" style="background:moccasin">over 3,800 years</span>,
until the construction of the Lincoln Cathedral in the UK in 1311.
</p>
</article>
<br />
<button onclick="toggle(this)">Hide Span</button>
<script>
let toggle = button => {
let element = document.getElementById("myspan");
let hidden = element.getAttribute("hidden");
if (hidden) {
element.removeAttribute("hidden");
button.innerText = "Hide Span";
} else {
element.setAttribute("hidden", "hidden");
button.innerText = "Show Span";
}
}
</script>
Initially, the <span> is visible.
Clicking the button calls JavaScript that toggles the hidden attribute.
With the hidden attribute the span element is invisible.
Here is when hidden support started for each browser:
Chrome
|
1.0 | Sep 2008 |
Firefox
|
1.0 | Sep 2002 |
IE/Edge
|
1.0 | Aug 1995 |
Opera
|
1.0 | Jan 2006 |
Safari
|
1.0 | Jan 2003 |