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

1 week ago 15

ARTICLE AD BOX

What Is an HTML Hide Element?

An HTML hidden property indicates the constituent is not yet oregon 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 similar this:

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

In the supra example, the browser volition not show the archetypal enactment of text. But it would show the 2nd line.

The HTML fell property allows developers to power the visibility of elements connected a page. This tin assistance streamline the idiosyncratic acquisition by preventing irrelevant contented from cluttering the webpage until that contented becomes relevant. Or until a idiosyncratic interacts with circumstantial parts of the page.

For example, if the idiosyncratic clicks a fastener oregon drop-down paper toggle. This enactment could trigger JavaScript codification to region the hidden property and uncover the content.

You tin use the HTML fell constituent wrong the HTML markup of a constituent to marque it invisible connected the webpage.

To bash this, adhd “hidden” to the constituent you privation to hide. Here’s however that mightiness look for a heading and a paragraph you privation to hide:

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

This property works crossed large browsers, including Chrome, Edge, Firefox, and Safari.

How the HTML Hide Attribute Works

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

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

display: none;

The leafage renders arsenic if the constituent does not exist, making the constituent invisible to the viewer.

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

Let’s accidental you person a webpage with a "Read More" button. You tin people the elaborate contented conception with the hidden property to marque it invisible.

Then, erstwhile the idiosyncratic clicks the "Read More" button, a JavaScript relation could region the hidden property from the elaborate contented section, making it disposable and accessible to the user.

Why Would You Want to Hide an HTML Element?

Learning however to fell HTML elements allows you to:

Declutter interfaces
Prioritize content
Create a responsive design

Hidden elements let you to minimize distractions connected a leafage to contiguous lone the astir important accusation to your users. For example, you tin fell precocious settings oregon further accusation down clickable links oregon buttons.

This gives users the quality to take whether they privation to larn more, without leaving the page. Like this conception of the Semrush homepage that allows users to prime antithetic aspects of the instrumentality suite to larn more:

Semrush homepage showing accusation astir immoderate of the cardinal features hidden down clickable elements.

You tin besides gully attraction to important accusation oregon actions you privation users to instrumentality by hiding little important elements. Such arsenic prominently showing a sign-up fastener portion hiding elaborate FAQs nether drop-down toggles.

To enactment the absorption connected your calls to enactment (CTAs). Users tin inactive larn much by clicking the drop-downs.

Monday.com pricing leafage showing prices, with much accusation hidden down a toggle button.

You tin besides fell HTML elements that whitethorn look connected desktop but could make a messy acquisition connected mobile. Such arsenic sidebars oregon other menus.

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

Other Techniques for Hiding Elements successful Web Design

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

Choosing betwixt these methods depends connected your preferences, including however elements should interact with the layout, whether accessibility is simply a concern, and if you necessitate animations.

Using CSS Display

You tin usage the “display” spot with the worth “none” to fell elements utilizing CSS. This method removes the constituent from the papers flow, meaning it volition not instrumentality up abstraction and volition beryllium invisible to users.

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

For example:

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

The 2nd method is with outer oregon interior CSS. In your CSS record oregon <style> tag, people the constituent you privation to fell utilizing a class, id, oregon immoderate selector, and acceptable “display: none;” for that selector.

For example:

.hidden-text {
display: none;
}

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

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

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

Elements with the “display: none;” spot don’t look for surface readers and different assistive technologies. So, the contented is inaccessible to users relying connected these technologies. Consider the 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 the constituent successful the papers travel (taking up space) but makes it invisible. And users are incapable to interact with it.

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

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

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

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

For web design, “visibility: hidden;” is perfect for maintaining the layout operation portion hiding elements, due to the fact that it preserves the element's space.

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

You tin fell elements with “opacity: 0;” for plan 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 leafage 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 interaction your website's rankings oregon effect successful penalties, similar the 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 flexible mode to show elements arsenic needed. Allowing you to show webpage contented based connected idiosyncratic interactions oregon circumstantial conditions.

JavaScript manipulates HTML elements by changing their styles oregon attributes. For hiding elements, you tin set the show benignant spot to “none” to fell an constituent and acceptable it backmost to “block” oregon “inline” (depending connected the element's default show value) to amusement it.

Some usage cases for dynamic hiding oregon revealing include:

User interactions: Such arsenic clicking a button, hovering implicit an constituent oregon submitting a form. For example, hiding a signifier aft submission to amusement a occurrence message.
Page load conditions: Set elements to look oregon vanish based connected situations erstwhile the leafage loads. Like the clip of time oregon the user's location.
Responses to data: Change contented visibility successful effect to showing loading animations portion waiting for data. You tin past fell them erstwhile information appears.

Hiding Content for Browsers but Not Screen Readers

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

But if you privation to fell contented for browsers but not for surface readers, 1 enactment is to presumption the contented off-screen. You should not bash this for immoderate navigable elements, similar links.

To bash this, archetypal make a CSS people similar so:

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

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

You’ll usage this to presumption the HTML constituent you privation to fell off-screen, similar this:

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

Screen readers volition work this arsenic though it’s inactive portion of the page’s content. However, it’ll beryllium positioned acold disconnected to the near of the 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 interaction 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 substance off-screen oregon utilizing CSS to marque substance the aforesaid colour arsenic the inheritance were techniques spammers employed successful the aboriginal days of Google.

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

So, beryllium cautious erstwhile hiding HTML elements. Plus, utilizing codification incorrectly erstwhile attempting to fell elements could pb to method issues with your website.

Address Technical SEO Issues with Site Audit

Regular tract audits tin assistance you place and resoluteness SEO issues. Including those that could originate if you marque mistakes erstwhile trying to fell HTML elements.

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

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

Site Audit hunt barroom with "yourdomain.com" entered.

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 the “Issues” tab.

Site Audit overview tab showing Site Health.

This tab volition amusement you issues with your website. You tin click connected the “Why and however to hole it” substance adjacent to each contented to larn astir it and however to hole it.