Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 36

ments is a common practice, it is actually discouraged by the HTML5 specification in
favor of using the hidden attribute. The hidden attribute adds additional semantics
to the affected element. Its presence means that the element is not relevant at this time.
This could be used by screen readers, for instance, which may otherwise pass over any
hiding applied through a CSS display rule.
The following HTML and JavaScript snippet shows how to use the hidden attribute
to show and hide content. The HTML part shows a definition list with a fox's common
name and its Latin name:
<dl id="fox">
<dt>Red Fox</dt>
<dd id="latin" hidden>Vulpes vulpes</dd>
</dl>
The JavaScript part adds the functionality to show and hide the Latin name of the red
fox when rolling on or off of its name. Since the hidden attribute is a Boolean attrib-
ute, it can be set to true or false using JavaScript, which leads to showing and hid-
ing the element in question:
function toggleLatin(){
var entry = document.getElementById("fox");
var latin = document.getElementById("latin");
entry.onmouseover = function(){
latin.hidden = false;
};
entry.onmouseout = function(){
latin.hidden = true;
};
}
window.onload = toggleLatin;
__________
3 For an example of using contenteditable, refer to the “Web Storage” section in Appendix A .
Drag-and-drop
The draggable and dropzone attributes are two attributes that really exemplify
the move of HTML toward building applications, as opposed to documents. These re-
quire some setup and JavaScript integration (which we'll discuss in Chapter 7 ) , but when
functional, these attributes allow HTML elements to be dragged from one part of the