Using the CSS property "display: none"

Cascading style sheets (CSS) allow you to organize the appearance and design of a web page. One of the most commonly used properties and its values is "display: none".

Property Definition

The property itself is multi-purpose and determines the type of element display in the document. Depending on the selected value, a certain section of the page can be displayed block-wise, linearly, as list items, as part of a table, etc. Thus, thanks to the "display" property, you can change the type of the block in the document.

As for the "property-value display: none" bundle, it allows you to remove an element or block from the document. In this case, the space for this piece of the page is not reserved, that is, it drops out of the stream. All the elements that are behind the "remote" simply do not see it and ignore the size and position of such a block. To return a hidden object, you need to refer to the document through scripts that simply change the value of the property to the required format. This will automatically format the page with the new object on it.

The difference between the "display" and "visibility" properties

Despite the fact that in the end both properties hide the element from the user, their principle of operation is significantly different. As mentioned above, the "display: none" parameter completely removes the element from the document. The block falls out of the page, thus not occupying a place in it. In this case, the object itself remains in the HTML-code.

In turn, the "visibility: hidden" property hides the element from the user, but does not remove it from the document model. Thus, on the page there is a reserved place for this block. That is, the document stream will perceive and take into account the location and dimensions of the element with the "visibility: hidden" property exactly as without it.

This difference in organization of the document structure with these two properties allows you to achieve the necessary result for the correct display of the page.

Using CSS - display: none

The Internet document allows you to use several options to determine the property of an element. First of all display: none can be registered in a separate file of cascading style sheets. This method is the most advanced and correct, since it allows you to render all selectors, classes and their properties in a separate document. Such a model makes it possible to very quickly find and change page parameters.

In the title of the document

The second option is to define the styles in the header of the document between the style tags. The effectiveness of this method is much less. It is recommended to use it only in extreme cases, since in the presence of a large number of styles, the readability of the page by the web designer is significantly deteriorating. And this leads to errors and slows down the process of developing an Internet document. This approach is recommended only if you add a small number of styles to this tag or debug a document.

It should be remembered that if this way of organizing styles is located in the document below than importing a separate style sheet, then the intersecting properties will be rewritten by those that are in the body of the html document.

Block div. Display: none

Another way is to add directly to the element of the code element "style = display: none;". This approach is often used when working with various frameworks, the purpose of which is to reduce the number of properties directly in the style sheet and display them in the Internet document itself. In addition, such a record often occurs when viewing the page "code inspector". It's important to remember that using this approach, you can change the property and its value that are specified in the style sheet. Therefore, you should be careful, as a result you can create additional problems and spend some time searching for and fixing errors in the code of the page.

JavaScript

It is also worth mentioning the additional possibility of changing this property. It does not apply to the style sheet and html code, but to the scripting language. Therefore for its application it is necessary to have at least some knowledge in this area. In order to remove an element from the document stream, you can use the JavaScript property "display = none". It allows you to change the structure of the document when a certain event occurs. Also, thanks to the use of scripts, you can dynamically ("on the fly") change the property parameter and thereby update the page view without having to reboot it. This approach is useful in the organization of drop-down menus, modal windows and forms.

SEO

In the field of optimizing web content for search engines, there are many superstitions and unclear points. So, many novice SEOShniki consider using the "display" property a bad manner. They explain this by the fact that the search engines, seeing hidden content, begin to consider the page as spam. In their words there is a share of logic, but nothing more. At this point in time, the property of hiding an object is used often enough to format drop-down menus and hide portions of the document that are not currently interesting to the user (for example, if one category is selected, information about the other is deleted). This approach is used by quite powerful Internet portals (one of them is "Amazon"). Thus, the search robots can not consider using the "display: none" property as spam.

Another thing is when this approach is used to hide individual words and symbols. Despite the fact that now the search robots do not yet have perfect algorithms for recognizing such "spam" in documents, the probability that the page will be caught on this is quite high. Therefore, it is recommended to use the "display" property strictly for the purpose - to change the block type or temporarily hide it from the user's eyes.