HTML hidden Attribute

The hidden attribute on an element hides that element. Althought the element is not visible, its position on the page is maintained.

Example

#

A hidden attribute on an <a> tag. The link to Google is not visible.

Click here:

<p>
  Click here: <a hidden target="_blank" 
                 href="https://google.com">Google</a>
</p>

Using hidden

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.


Syntax

<tag hidden >
or
<tag hidden="hidden" >

Values

#

Value Description
hidden Use 'hidden' or hidden='hidden'. Both are valid.

More Examples

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>

Code explanation

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.


Did you know?

Did you know?

Other ways of hiding HTML elements

Aside from the hidden attribute, there are other ways to hide HTML elements.

All of these are through CSS which offers 3 different options.

  • CSS display:none
  • CSS visibility:hidden
  • CSS opacity:0

In the examples below we highlight their differences.

Original Setup

This is the original setup with 3 colored <div> elements.

This is element 1.
This is element 2.
This is element 3.
<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>

CSS display:none

The display:none declaration completely hides an HTML element.
It affects the page flow and surrounding elements close around the invisible tag.

This is element 1.
This is element 2.
This is element 3.
<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>

CSS visibility:hidden

The visibility:hidden setting also hides the HTML element.
However, this does not affect page flow and the surrounding elements do not change position.

This is element 1.
This is element 2.
This is element 3.
<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>

CSS opacity:0

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.

This is element 1.
This is element 2.
This is element 3.
<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>

Elements using the hidden attribute

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

Browser support

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

You may also like



Guides