There are multiple ways to hide an element in the CSS. Each method’s effect on accessibility, layout, and performance differs greatly from another. Acting on an HTML attribute level is one way to hide elements and, as this is a global attribute, it is usable on any HTML element in the CSS.
In this article, you’ll learn how to hide an HTML element and when to do it.
What Is an HTML Hide Element?
An HTML hidden attribute indicates that the element is not yet or is no longer relevant. If something is marked as ‘hidden’ in the CSS, this makes the element hidden from search engines, making it impossible to display and invisible even to screen readers.
In other words, using an HTML hidden attribute will ensure that search engines like Google won't render certain elements.
Expert insight: A Boolean is a binary variable that can only have two possible values, 0 (false) or 1 (true). The HTML hidden attribute is a Boolean attribute. This means that if it is present, the value is always true, and if it’s absent, the value is always false.
Why Hide an HTML Element?
The reason to hide an HTML element can vary. It is often used to keep the user from seeing an element until some other requirement is fulfilled. For example, you could hide certain elements of a page until the user completes the login process.
Often in the case mentioned above, webmasters decide to use JavaScript to unblock the hidden elements, using something similar to the following:
Lastly, a good reason to start using HTML hidden attributes is Google’s transition to a mobile-first index. The strongest SEO benefit of hiding elements is the possibility of squeezing a lot of content onto a small mobile webpage while still delivering a smooth user experience.
It’s the perfect balance between SEO and UX Design.
How to Use the Hidden Attribute
When using the HTML hidden attribute, it’s important you don’t link to the hidden element from non-hidden elements. This refers to, for example, the case of an href attribute linking to a hidden section. The content marked with a hidden attribute should not be relevant to the user — otherwise it wouldn’t be hidden — and therefore there shouldn’t be any reason to link to it.
However, in some cases elements might still link to HTML elements hidden in the CSS. For example, some descriptions might be relevant only if referenced from the element they describe. That is the case for an aria-describedby attribute. This description remains hidden until the user actively calls on it with a specific action (e.g., by clicking on or hovering over it).
Expert insight: An aria-describedby attribute provides a descriptive label for an element in the same DOM document.
It’s important to remember that changing the DOM style display of an HTML hidden element will override the first command. In other words, an element styled as display: flex will be read and displayed by browsers even in presence of a hidden attribute.
Hidden Content Bad Practices That You Should Avoid
Hiding elements is always a very risky move and might seriously harm your rankings. That is because it has been widely used as a spam technique since search engines relied on very simple algorithms that could be tricked by keywords repetition.
Spammy websites often used black-hat SEO techniques. They would, for example, create two versions of the same webpage, one for the algorithm and one for human visitors. This meant the webmaster wrote long nonsensical paragraphs full of keywords to the benefit of search engines, while the users were served a conversion-optimized web page where the original content was hidden and inaccessible.
This practice created situations where users clicked on a link thinking it would lead to a legitimate website but were then — to their disappointment — taken somewhere else. This practice was known as cloaking and enabled spammers to improve their affiliate links sales or ad conversions. It is now one of the many causes of a Google penalty.
Note: Cloaking has nothing to do with the HTML hidden attribute discussed here.
How to Hide an HTML Element Without Violating Google’s Guidelines
Nowadays, the vast majority of websites feature hidden elements in the form of a tab that users need to click on in order to access more content. Hidden content becomes problematic only when it is completely inaccessible to the user, so clearly there is a big difference between cloaking and HTML hidden elements accessible via an action (e.g. clicking on a Read More button).
When in doubt, remember this golden rule:
Offer a visible cue that clearly shows to users that there is more content on the page and explain how they can access it.
Rest assured that if a user can see your hidden elements, Google can see them too and won’t penalize your website. The Google algorithm has come a long way since the exact-text-match of its early days and it is able to render a webpage using JavaScript and CSS files.
Google bots view websites almost exactly as a user does. Focus on delivering a good user experience and you’ll be just fine.
Address Technical SEO Issues with Site Audit
The Site Audit tool is your best ally against Google’s penalties. If you’re searching for any technical SEO issues, it’s a great place to start. Check the Issues Report to find out about errors, warnings, and notices that your website is experiencing at the moment.
Consult our guidelines to find out the full list of issues that Site Audit can identify.