Hiding Elements with CSS

With CSS, you can also hide elements on the page. You might initially wonder why you would want to hide elements on a page. Here are a couple valid examples:

• Your page banner may essentially be serving the function of the <h1> tag if the page banner is the main heading. To make the page more accessible, you should add a hidden <h1> tag. If images are turned off or a visitor is at your site with a mobile web browser or web-enabled cell phone, they won't see the image but will see the <h1> text.
• You have a long navigation menu, and with the style sheet disabled, a visitor must scroll past this long navigation menu to get to the page content. A hidden "skipnav" link would allow the visitor one-click to skip past all the navigation and go directly to the page content.

As you can see, both of these examples makes no change to the page for those visitors browsing with a standard, visual web browser. But for visitors with style sheets disabled or using handheld web devices or web-enabled cell phones, these two examples provide very good accessibility options for these users.

There are two basic ways to hide an element with CSS:

• Visibility property
  • Can be invisible, but takes up space on the page
• Display property
  • If display is turned off, item does not take up space on the page

Here is some code to illustrate the first of our two examples above:

BEFORE:
<img src="welcome-bu-titlebar.jpg">

AFTER:
.titlebar {
   background-image: url(welcome-bu-titlebar.jpg);
}
.titlebar h1 {
   display: none;
)
<div class="titlebar><h1>Welcome to Boston University</h1></div>

In our BEFORE example, we have simply a titlebar image. The words "Welcome to Boston University" are in a nice font within the image. When considering the structure of the page, this graphic is serving as a defacto <h1> element, but is not marked up as such in the HTML.

In our AFTER example, we have create the same exact visual look with better document structure and logical markup. The <div> with class="titlebar" displays the graphic as a background image. The <h1> text is there, but the display is set to "none" so visual browsers will see no difference to the page. The AFTER example is also far more accessible to visitors with screenreaders, mobile web devices, and web-enabled cell phones.