DEV Community

loading...
Cover image for Hide webpage elements, natively
platformOS

Hide webpage elements, natively

Paweł Kowalski
Performance, JavaScript, Serverless, and Testing enthusiast.
Updated on ・2 min read

This post is inspired by "How to hide Web page elements" where Habdul Hazeez shown a lot of techniques of hiding elements on your website.

I want to share the solution I have been using in the past years. I like low-tech, native solutions to everything (Commandment 2: You shall always try to use native features before you reimplement them in JavaScript.) and I believe this is the best solution to that problem.

hidden attribute

It is called hidden attribute. This code:

<p>I'm visible</p>

<p hidden>
  I'm invisble!
</p>

<p>I'm visible too</p>
Enter fullscreen mode Exit fullscreen mode

Results in:

Result

Paragraph marked as hidden is invisible.

See live demo on JSFiddle

In my opinion, this is the best way to hide elements because:

  1. It is native
  2. It does not require CSS by default **
  3. It is hidden from screen readers because it is native
  4. It is supported by all browsers

** display property in CSS overrides hidden attribute, so I usually add this little CSS snippet:

[hidden] { display: none; }
Enter fullscreen mode Exit fullscreen mode

in default styles to fix that issue.

Read more on the hidden attribute on MDN.

Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website.

Discussion (0)