Content hiding refers to the hiding of elements from view. Although it is a viable technique in Web design and development, it can also be used to try to manipulate search engines to get higher rankings, and for this reason, it is frowned up and considered deceptive by search engine companies and can result in your site being blacklisted and not included in search results. An example of usages that are considered deceptive is “keyword stuffing,” which specifying many keywords as the value of the alt attribute and hiding them.
One of the most important uses of content hiding is to improve accessibility of users to screen readers. In essence, textual cues or indicators are added and then hidden for content that is apparent to sighted users but not to screen reader users. For example, hidden text could be used to inform the screen reader about breadcrumbs (i.e., “You are here” indicators) or a form control, such as a search box, that has no visual label, because its function is apparent to sighted users.
As mentioned Chapter 4, hiding content also has application in the technique of skipping unimportant content at the start of a page and jumping to the main content, which is especially beneficial to screen reader and keyboard-only users. It is usually necessary when style sheet is disabled (i.e., when CSS styles are not applied) and navigation menu turns into a long vertical list of items. In such a case, to spare users from having to go through the long list before getting to the main content, a hidden link is provided at the very top of the page that is accessible to the screen reader and appears when tab action by sighted keyboard users gives it focus. Normal users also benefit from the technique, because the link becomes visible when CSS is disabled, since all hidden content implemented with CSS becomes visible when CSS is disabled. An example of how to implement the technique is shown in Chapter 12 under “Absolute position” There are various ways of hiding an element. Common ones are via using the display or visibility properties. The opacity property of an element (discussed in Chapter 9) can also be set to 0, or it can be hidden behind another, using the z-index property, which is discussed in Chapter 12, or the element can be pushed off screen to the left, using, for example, a large negative margin value (you saw this in the third <p> element in the example in Figure 10.55) or element positioning. Here, only how to use the display and visibility properties is shown. How elements are positioned is discussed in Chapter 12.
1. Hiding Content by Using the display Property
The code in Figure 10.69 showed an example of how the display property can be used. The addition of “omit” class to the fourth <li> element and the addition of the il.omit{ displaymone; } rule to the code, as shown in Figure 10.71, remove the element from the normal flow of content and also collapse the space that it has been occupying. Figure 10.72 shows the result.
2. Hiding Content by Using the visibility Property
In contrast to the display property, the visibility property hides an element’s box without collapsing the space that it occupies, thereby leaving a blank space. The values that it takes are hidden (which hides an element) and visible (which shows the element). To show how it is used, the display: none declaration in Figure 10.71 is replaced with visibility: hidden. The effect is shown in Figure 10.73. The property can also be used to hide table rows or columns. When used with tables, it also takes collapse as value, which hides a row or column and removes the space that a hidden row or column leaves.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.