HTML Hide Element: What Is the Hidden Attribute & How to Use It

What Is an HTML Hide Element?

An HTML hidden property indicates nan constituent is not yet aliases nary longer relevant. If you people an constituent arsenic “hidden,” you’re telling browsers not to show it to users. Even if they’re utilizing surface readers.

The hidden property looks for illustration this:

<p hidden>This text should be hidden.</p>
<p>This text should not be hidden.</p>

In nan supra example, nan browser will not show nan first statement of text. But it would show nan 2nd line.

The HTML hide property allows developers to power nan visibility of elements connected a page. This tin thief streamline nan personification acquisition by preventing irrelevant contented from cluttering nan webpage until that contented becomes relevant. Or until a personification interacts pinch circumstantial parts of nan page.

For example, if nan personification clicks a fastener aliases drop-down paper toggle. This action could trigger JavaScript codification to region nan hidden property and uncover nan content.

You tin use nan HTML hide constituent wrong nan HTML markup of a constituent to make it invisible connected nan webpage.

To do this, adhd “hidden” to nan constituent you want to hide. Here’s really that mightiness look for a heading and a paragraph you want to hide:

<div hidden>
<h1>This Heading Is Hidden</h1>
<p>This text is also hidden</p>
</div>

This property useful crossed awesome browsers, including Chrome, Edge, Firefox, and Safari.

How nan HTML Hide Attribute Works

The HTML hide property makes immoderate webpage constituent invisible to users without removing it from nan HTML document. Letting you power nan visibility of contented connected a page.

Adding nan hidden property to an constituent causes nan browser to use nan pursuing CSS property:

display: none;

The page renders arsenic if nan constituent does not exist, making nan constituent invisible to nan viewer. 

However, nan constituent still exists successful nan DOM (Document Object Model), meaning you tin entree and manipulate it utilizing JavaScript.

Let’s opportunity you person a webpage pinch a "Read More" button. You tin people nan elaborate contented conception pinch nan hidden property to make it invisible. 

Then, erstwhile nan personification clicks nan "Read More" button, a JavaScript usability could region nan hidden property from nan elaborate contented section, making it visible and accessible to nan user.

Why Would You Want to Hide an HTML Element?

Learning really to hide HTML elements allows you to:

• Declutter interfaces
• Prioritize content
• Create a responsive design

Hidden elements let you to minimize distractions connected a page to coming only nan astir important accusation to your users. For example, you tin hide precocious settings aliases further accusation down clickable links aliases buttons. 

This gives users nan expertise to take whether they want to study more, without leaving nan page. Like this conception of nan Semrush homepage that allows users to prime different aspects of nan instrumentality suite to study more:

You tin besides tie attraction to important accusation aliases actions you want users to return by hiding little important elements. Such arsenic prominently showing a sign-up fastener while hiding elaborate FAQs nether drop-down toggles.

To put nan attraction connected your calls to action (CTAs). Users tin still study much by clicking nan drop-downs.

You tin besides hide HTML elements that whitethorn look connected desktop but could create a messy acquisition connected mobile. Such arsenic sidebars aliases other menus. 

The HTML hide property is simply a simple, semantic measurement to bespeak that a browser should not show an element. But different techniques whitethorn connection much power erstwhile hiding elements and really they impact nan webpage’s layout and visibility.

Other Techniques for Hiding Elements successful Web Design

Different techniques for hiding elements successful web creation see utilizing CSS and JavaScript. Each attack offers unsocial advantages that fresh circumstantial usage cases.

Choosing betwixt these methods depends connected your preferences, including really elements should interact pinch nan layout, whether accessibility is simply a concern, and if you require animations.

Using CSS Display

You tin usage nan “display” spot pinch nan worth “none” to hide elements utilizing CSS. This method removes nan constituent from nan archive flow, meaning it will not return up abstraction and will beryllium invisible to users.

There are 2 methods to usage CSS display. The first is via inline CSS, wherever you adhd a “style” property pinch “display: none;” successful your HTML element. 

For example:

<p style="display: none;">This text is hidden.</p>

The 2nd method is pinch outer aliases soul CSS. In your CSS record aliases <style> tag, target nan constituent you want to hide utilizing a class, id, aliases immoderate selector, and group “display: none;” for that selector. 

For example:

.hidden-text {
 display: none;
}

Then, successful your HTML, usage nan people “hidden-text” for immoderate constituent you want to hide:

<p class="hidden-text">This text is hidden.</p>

When you group an constituent to “display: none;” you region nan abstraction it would usually occupy, and different elements whitethorn displacement to capable nan gap.

Elements pinch nan “display: none;” spot don’t look for surface readers and different assistive technologies. So, nan contented is inaccessible to users relying connected these technologies. Consider nan effects of utilizing this spot to guarantee you're not hiding contented that should beryllium accessible to each users.

Visibility: Hidden and Opacity

The “visibility: hidden;” spot holds nan constituent successful nan archive travel (taking up space) but makes it invisible. And users are incapable to interact pinch it.

However, nan “opacity: 0;” spot makes an constituent afloat transparent but still interactive, and it still takes up space.

Here’s an illustration of CSS codification pinch some visibility and opacity properties:

.hidden-visibility {
visibility: hidden;
}
.transparent-opacity {
opacity: 0;
}

Both elements are invisible to users. Users can’t interact pinch nan .hidden-visibility element, but they tin interact pinch nan .transparent-opacity element.

For web design, “visibility: hidden;” is perfect for maintaining nan layout building while hiding elements, because it preserves nan element's space. 

You mightiness usage nan “opacity: 0;” spot erstwhile creating a soft modulation to invisibility.

You tin hide elements pinch “opacity: 0;” for creation creativity, but this whitethorn confuse users if you don’t instrumentality it carefully. For example, users could accidentally click a afloat transparent fastener and spell to a page they didn’t mean to.

Search engines whitethorn besides see utilizing “opacity: 0;” for hiding contented arsenic a spam practice, particularly if it’s an effort to manipulate rankings. This could negatively effect your website's rankings aliases consequence successful penalties, for illustration nan hunt motor removing your webpage from hunt results entirely.

Further reading: How To Identify and Fix a Google Penalty

JavaScript Techniques for Dynamic Content Hiding

JavaScript offers a elastic measurement to show elements arsenic needed. Allowing you to show webpage contented based connected personification interactions aliases circumstantial conditions. 

JavaScript manipulates HTML elements by changing their styles aliases attributes. For hiding elements, you tin set nan show style spot to “none” to hide an constituent and group it backmost to “block” aliases “inline” (depending connected nan element's default show value) to show it.

Some usage cases for move hiding aliases revealing include:

• User interactions: Such arsenic clicking a button, hovering complete an constituent aliases submitting a form. For example, hiding a shape aft submission to show a occurrence message.
• Page load conditions: Set elements to look aliases vanish based connected situations erstwhile nan page loads. Like nan clip of time aliases nan user's location.
• Responses to data: Change contented visibility successful consequence to showing loading animations while waiting for data. You tin past hide them erstwhile information appears.

Hiding Content for Browsers but Not Screen Readers

In astir modular cases, nan contented you show to users connected browsers should beryllium disposable to those utilizing devices for illustration surface readers. This is typically a website accessibility champion practice.

But if you want to hide contented for browsers but not for surface readers, 1 action is to position nan contented off-screen. You should not do this for immoderate navigable elements, for illustration links.

To do this, first create a CSS people for illustration so:

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

You tin sanction nan “.sr-only” people thing other if request be. 

You’ll usage this to position nan HTML constituent you want to hide off-screen, for illustration this:

<div class="sr-only">This text is hidden off-screen.</div>

Screen readers will publication this arsenic though it’s still portion of nan page’s content. However, it’ll beryllium positioned acold disconnected to nan near of nan screen, truthful sighted users won’t spot it successful their browsers.

The Risks of Hiding HTML Elements

Hiding elements connected your website incorrectly could negatively effect your visibility successful hunt results. 

Search engines whitethorn spot hidden contented arsenic an effort to manipulate hunt results by hiding contented from users but presenting it to hunt engines.

Placing ample amounts of keyword-stuffed matter off-screen aliases utilizing CSS to make matter nan aforesaid colour arsenic nan inheritance were techniques spammers employed successful nan early days of Google.

But now hunt engines tin spot these practices arsenic attempts to manipulate rankings, perchance resulting successful penalties.

So, beryllium observant erstwhile hiding HTML elements. Plus, utilizing codification incorrectly erstwhile attempting to hide elements could lead to method issues pinch your website.

Address Technical SEO Issues pinch Site Audit

Regular tract audits tin thief you place and resoluteness SEO issues. Including those that could originate if you make mistakes erstwhile trying to hide HTML elements.

Semrush’s Site Audit instrumentality helps spot issues pinch your website’s SEO and provides recommendations connected really to resoluteness them.

Go to nan tool, participate your domain name, and deed nan “Start Audit” button.

You’ll spot a paper wherever you tin configure your audit settings.

When you’re ready, click “Start Site Audit.”

When your audit is complete, you’ll spot a elaborate study of your website’s wide health. For much details, click connected nan “Issues” tab.

This tab will show you issues pinch your website. You tin click connected nan “Why and really to hole it” matter adjacent to each rumor to study astir it and really to hole it.

Solve your site’s method issues by trying retired nan Site Audit instrumentality for free.

This station was updated successful 2024. Excerpts from nan original article by Connor Lahey whitethorn remain.