Providing Hidden Additional Information in HTML

Sometimes, it is desirable to provide additional information but have it hidden, so that it is displayed only when users want it. HTML provides the <details> element, with which this can be done. The <summary> element can be used with this element to provide a visible heading for it, which, when users click, reveals the hidden content. Figure 3.32 shows how the elements are used, and Figures 3.33 and 3.34 depict the effect in the Chrome browser.

Implement the example, but without the <summary> element, to see what happens. Also, can you think of an example of when you might use the technique of hiding text until it is requested in a document, and say what the pros and cons of the technique are?

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *