Hiding Elements from all Devices using the Hidden Attribute

To hide an element from all devices means just that: no single device will perceive it anymore (although the element still is present in the DOM). This can be achieved using either an HTML attribute or CSS attributes.

In HTML 5, the hidden attribute was introduced. It can be set on an element directly and makes it completely invisible to any device.

Working Example

This paragraph is visible. But is there something below?

This text is perceivable by no device.

Conclusion

We strongly suggest using the HTML attribute hidden, as it separates content clearly from presentation. Notice: hiding an element from all channels is a question of content, not of visual presentation. In addition, it makes obvious in the DOM already what elements are hidden, so it leads to better readable and maintainable code.

Code

<p>
  This paragraph is visible. But is there something below?
</p>
<p hidden="">
  This text is perceivable by no device.
</p>

.display-none {
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

NIL