HTML and CSS Reference
In-Depth Information
For example, you might want to hide some page content from users who are not signed in. You could use JavaScript
(you will be introduced to this in Chapter 11) to monitor whether a user has successfully logged in and show/hide the
content appropriately. To hide the element, you set the attribute to true; to show it, you would set it to false.
<p hidden="true">Only signed in users can see this content.</p>
Note that the
hidden
attribute is a new addition in HTML5 and therefore browser support for this attribute is cur-
rently limited.
The title Attribute
You have already encountered the
title
attribute when you learned about links, but I want to cover it in a little
more detail. The
title
attribute can be used to supply a description of the element's content. If you specify a
title
attribute, its contents will be displayed when users hover their mouse over the element for a few seconds.
<a href="http://google.com" title="The Google Search Engine">Google</a>
In this example, when users hover their mouse over the link, they see the value of the
title
attribute displayed in a
tooltip. This is shown in Figure 3-7.
Figure 3-7
A tooltip displaying the value of the title attribute.
It may sound obvious, but remember that these tooltips will not work on mobile devices.
The lang Attribute
You encountered the
lang
attribute in Chapter 1, where you used it on the
<html>
element to set the language of
the whole page to English. The
lang
attribute can be applied to any element in order to specify the language of its
contents. The following example sets the language of the page as English, but also includes a paragraph of German
text (
“de”
for Deutsche).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
