Hiding Elements from all Devices using Display None

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.

Hiding elements using display none means that the elements will be invisible to users on all devices, as the display property will be set to none. This means that the elements will not take up any space on the page and will not be visible to the user, regardless of the device they are using. This can be useful for hiding certain elements on a page, such as ads or unnecessary information, to improve the user experience.

Working Example

This paragraph is visible. But is there something below?

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 class="display-none">
  This text is perceivable by no device.
</p>
.display-none {
  display: none;
}
NIL