Dofactory.com
Dofactory.com

HTML <article> hidden Attribute

A hidden attribute on an <article> tag hides the article.

Although the article is not visible, its position on the page is maintained.

Example

#

A hidden attribute on an <article> tag.
The article is not visible.

An invisible article:

<p>An invisible article:</p>

<article hidden>
  <h2>Early life of Van Gogh</h2>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for 
     a visit. 
  </p>
  <p>
     He was thrilled and took long walks with her. Cornelia was seven 
     years older than he was and had an eight-year-old son. Van Gogh 
     surprised everyone by declaring his love to her and proposing marriage. 
     She refused with the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

Using hidden

The hidden attribute hides the <article> element.

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

An <article> with a hidden attribute is not visible, but it maintains its position on the page.


Syntax

<article hidden>
or
<article hidden="hidden">

Values

#

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

More Examples

Clicking the button toggles A hidden attribute on the <article> element.

Early life of Van Gogh

Van Gogh returned to Etten in April 1881 for an extended stay with his parents. He continued to draw, often using his neighbors as subjects. In August 1881, his recently widowed cousin, Cornelia Vos-Stricker, daughter of his mother's older sister arrived for a visit.

He was thrilled and took long walks with her. Cornelia was seven years older than he was and had an eight-year-old son. Van Gogh surprised everyone by declaring his love to her and proposing marriage. She refused with the words: "nooit, neen, nimmer" (nay, no, never).


<article id="myarticle" style="background-color:aliceblue;padding:15px;">
  <h2>Early life of Van Gogh</h2>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for 
     a visit. 
  </p>
  <p>
    He was thrilled and took long walks with her. Cornelia was seven 
    years older than he was and had an eight-year-old son. Van Gogh 
    surprised everyone by declaring his love to her and proposing marriage. 
    She refused with the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

<br />
<button onclick="toggle(this)">Hide Article</button>

<script>
  let toggle = button => {
     let element = document.getElementById("myarticle");
     let hidden = element.getAttribute("hidden");
    
     if (hidden) {
        element.removeAttribute("hidden");
        button.innerText = "Hide Article";
     } else {
        element.setAttribute("hidden", "hidden");
        button.innerText = "Show Article";
     }
  }
</script>

Code explanation

The hidden attribute hides the <article> element.

When clicking the button, a JavaScript function adds or removes the hidden attribute.


Browser support

Here is when hidden support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

 Back to <article>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


What's your favorite/least favorite part of Dofactory?


Guides