What is HTML Hidden Attribute?

What is HTML Hidden Attribute?

The hidden attribute is a Boolean attribute that hides an element that is no longer relevant. If the attribute of an element is set to ‘hidden’, browsers do not render it, and the element stays hidden from search engines. However, the content that uses hidden attributes can be made visible using JavaScript. It has been newly introduced in HTML5.

Syntax

The hidden attribute is mentioned in the opening tag of the element that needs to be hidden.

Applies To

The HTML hidden attribute is a Global Attribute and is used by all HTML elements.

Examples

Example 1: A Hidden Paragraph

In this example, a paragraph is hidden, by using the hidden attribute inside an opening <p> tag.

Code

Output

Example 2: Using the Hidden Attribute with the <div> Element in HTML

This example illustrates how an entire div along with its contents is hidden, by using the hidden attribute inside an opening <div> tag.

Code

Output

Example 3: Hidden Attribute to Hide the Content While Rendering it to the Browser

In this example, an image is hidden, by using the hidden attribute inside an opening <img> tag. The example shows you the difference between an <img> tag with the hidden attribute and the other without the attribute.

HTML

CSS

Why Hide an HTML Element?

The HTML hidden attribute helps to maintain a perfect balance between SEO and UX Design.

• It can be used to keep certain elements hidden from the user until some other requirements are fulfilled. For instance, some components of a page like items in the cart are visible to the user only after they log in. In these cases, webmasters use JavaScript to unblock the hidden elements.
• The HTML hidden attribute helps in leveraging SEO performance. Hiding elements helps to include a lot of content into the small mobile display of a webpage. This improves the SEO without compromising the user experience.

How to Hide an HTML Element Without Violating Google’s Guidelines

Some spam websites use the hidden attribute feature for cloaking, a process where users click on a link expecting it to lead them to a genuine site but end up on another website.

However, there is a fine line between cloaking and HTML hidden elements accessible by users. Google penalizes websites that practice cloaking. To avoid violation of Google's Guidelines, the entire website content should be visible to the search engine. Google can render a webpage using JavaScript and CSS files. So, it would not penalize a website where it can see any hidden content that the users can see. To prevent users from missing out on information (because it is hidden) there must be a visible cue that makes users aware of the availability of more content and how they can access it.

In simpler words, since Google bots view websites in a way similar to the user if all the content on the website is delivered to the user, the website will not violate Google's Guidelines.

Hidden Content Bad Practices That You Should Avoid

Hiding elements might hamper the website rankings as search engines rely on simple algorithms that could be tricked by keyword repetition.

Spammy websites often create two versions of the same webpage. The first one is for the algorithm which contains long paragraphs containing keywords that improve SEO. The second one is for users that contain legitimate content.

This is cloaking, and such websites are now penalized by Google.

Browser Compatibility

The following table shows the first version of the browsers that started supporting the HTML hidden attribute.