By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Hidden Attribute

Reference on the hidden attribute of HTML, and a useful example showing how its used.

Created: 2012-02-25 17:28

The HTML Hidden Attribute will hide the element that its applied to, you can then use JavaScript to change its state.

Elements with this attribute are either not relevant, or not relevant yet.

The hidden attribute can for example be used when you are taking a all-in-one approach to your applications, where everything is contained in a single page, loaded in as few http requests as possible. In other words, you can easily change between different screens in your applications, without having to load each screen upon request.

It is unknown to Brugbart how search engines will react to this element, feel free to add your comments so we can update this reference. For now its likely safest to use it in sections you don't want indexed, such as admin sections of your site.

HTML Hidden Attribute examples

Any HTML element can have the hidden attribute applied, including the html element itself.

<section id="screen1" hidden="true">
<!--Screen1 Content-->
<section id="screen2">
<!--Screen2 Content-->


To show and hide the different screens, simply use something like the below JavaScript.

function ShowScreen1() {
  document.getElementById('screen1').hidden = false;
  document.getElementById('screen2').hidden = true;