You have an element in your html that you want to temporarily hide. should you change it’s visibility to hidden or its display to none? Is there any difference? How will the rest of the page respond to your element that’s sometimes seen and sometimes not?
The css properties visibility and display may seem to do the same thing on the surface, but they are very different and often confuse those new to web development. I thought a quick walkthrough of the main values associated with each property along with a demo of each in action would help remove that confusion.
Visibility and Display Properties in Action
Here’s a simple demo of visibility and display in action that will open in a new window. Click the two links at the top to toggle the visibility and the display to see how each affects the other elements on the page. I’ll explain what’s going on with each property below.
How the CSS Visibility Property Works
The visibility property has four values associated with it, but let’s focus on the two used most often, visible and hidden.
From W3Schools
{code type=css}
visibility: visible
The element is visible. This is default
visibility: hidden
The element is invisible (but still takes up space)
{/code}
Both values are rather straightforward and behave exactly as you think. You see elements that are visible and don’t see elements that are hidden. That important point to note is that when hidden the element still takes up space.
How the CSS Display Property Works
The display property has quite a few values associated with it, but again let’s focus on a smaller subset. The two values that concern us here are block and none, but I want to quickly mention the inline value too.
Again from W3Schools
{code type=css}
display: none
The element will generate no box at all
display: block
The element will generate a block box
(a line break before and after the element)
display: inline
The element will generate an inline box
(no line break before or after the element)
{/code}
On the surface display: none might seem to be the same is visibility: hidden, but it isn’t. The big difference is in that point I called out above.
visibility: hidden – the element stays in the normal document flow
display: none – the element is removed from normal document flow so surrounding html elements collapse to close the space
Elements set to display as block or inline both fill a space. The difference being that block elements have line breaks around them and inline elements don’t. Some elements are block elements by default and some are inline elements.
When Should You Use Visibility and When Should You Use Display?
While both can be used to “hide” an element each does so in a different way. Again that difference is in how each responds to the normal document flow.
You want to use visibility when you want the element to hold its space even when it’s not seen. You want to use display when you want the element to give back its space allowing the other elements on your page to collapse around it.
In practice I tend to use display more than visibility. Usually when you want an element not to show you don’t want to leave an empty space in its place. You do need to understand that other html elements will move to fill the now unoccupied space and develop your layout accordingly.
SEO Effects of Visibility and Display
A sometimes used spam tactic is to stuff keywords on a page and make them invisible in some way. Often this is done not through either of the css properties above, but rather by giving the text the same color as the background it sits on or making the font so small as to render it invisible.
Because these tactics are frowned up by search engines, some people worry about using either the visibility or the display property to “hide” html.
There are many good reasons why you want some elements in your design to sometimes be seen and sometimes not be seen and search engines understand that. As long as you aren’t trying to trick search engines in any way you shouldn’t encounter any problems using either visibility or block to show and hide an element.
Download a free sample from my book, Design Fundamentals.
thanks for that article. thats a very interesting difference between both css proberties.
Nice post explaining the difference.
Hi Steven,
Great post. You briefly mentioned the SEO effects, but I was hoping you could clarify something. I’ve been learning a lot about SEO & have heard that “trying to pad your site’s keywords” can actually hurt your SEO rankings. I haven’t heard definite answers about using visibility or display, but my “impression” is that Google would hurt you for doing that. How would Google know if my hidden div is actually beneficial, or if it’s a scam?
I ask, because I want to design a header that has a headline (1 sentence), & onMouseOver, the headline changes to 4 images that show how our service works (hope this is clear). That headline is going to be great keyword bait for me, so I need it to be included in SEO.
I’d love to hear your thoughts.
Thanks,
-David
First I think padding your keywords is only going to hurt if you’re so over the top. An extra keyword here or there shouldn’t be a problem
With the hidden text I think it’s difficult for search engines to really know your intent. My view is that if it makes sense for your visitors then do it. If you’re hiding text just for the seo benefits, then it’s probably best not to do it.
I think the obvious hidden spammy text can hurt more when someone else sees it and reports you. Once a real person sees what you’ve done it’s easy to tell if it’s spam or not. Much harder for an algorithm to figure out.
The headline as you’re describing seems fine to me. There’s clearly a useful purpose for your visitors.
Hope that helps.
Hi Steven,
First of all thanks for the article.
I have few question.
Can I use links in hidden visibility to get back links? And which one will be better for doing this… display or visibility?
I hope you will answer my questions.
Kushagra
I wouldn’t recommend hiding links by making them invisible as an seo tactic. Search engines look at that as spam and it will likely cause more harm than good.
Good post!
thanks for that article from germany!
You’re welcome from the U.S.
thanks for article from romania
This is a great article. The differences in these two things are very interesting. Thanks for sharing.
Thanks Brett. I’m glad you liked the post.
This is a wonderful article ,I`m a Web Designer
from china,Thinks your sharing.
Thanks huguangjian.
From SEO-Perspective I’m still not sure if I really should use “visibility:hidden” to hide my AddToAny-Bar. But thank you for this Information anyway!
This post wasn’t about the seo perspective, but I can give you an easy answer. If your reason for hiding the bar are because it gives your visitors a better experience then it’s ok to hide it as long as you give your visitors a mechanism to then unhide it.
If your reason for hiding the bar is to manipulate search results then don’t do it as it probably goes against search engine policies.
What about the accessibility aspects of one versus the other?
Good question. I’m not 100% sure, but I think using visibility would mean the content is accessible. With display: none I’m thinking that keeps the content from being read by screen readers. This is the part I’m not really sure about.
If you don’t mind waiting I’m planning at least one and hopefully more posts on accessibility in the not too distant future, probably sometime in September.
Good info about visibility and display. I use them normally in my designs. The unique problem is that we can have problems with search engine robots if you put a big content in it like a big list of keywords os phrases.
Best regards.
You usually don’t want or need to hide lots of content though. In some cases you do, but it shouldn’t just be a list of keywords and phrases.
Thanks a lot!
I am a bit late. I just wondered whether you have changed your mind after Google’s Panda and Penguin updates. Because we now know that showing text content solely to googlebot, and hiding it from screen readers can be easily tracked by Google. I am analyzing one of my customers new website design, and the designy agency used display: code and display: codes so often that when i disable javascript, and crawl the page like googlebot I can not see the text content. But it stays in the source code. Can we say that this content will be crawled by googlebot and will not hurt the site’s google rankings? I will appreciate your clarification. Thanks in advance!
Better late than never. 🙂
I haven’t changed my mind at all. Just as when I wrote this post I think if you have a legitimate reason to make certain content or elements invisible or hide them completely it’s fine. I wouldn’t do either in the name of search engine optimization, but if you have a good reason to hide something or making it invisible I don’t think there should be any problem.
The site you describe for your client sounds like it’s using the display property to try to manipulate search engines. I haven’t seen the site or code so I can’t say for certain, but it does sound like it’s pushing into the spammy side of things.
Nice article thanks for that advice. Was confused which one to use.
Thanks for sharing.
it was a good article