- Attribute of
- HTML Link Options Illustrated With Code Examples
- What does
- Assigns a name to different linked resources so that users can choose between them.
Giving Users Choice
title attribute is used with the
<link> element, it takes on a special purpose that is completely unique to this element. Most of the documentation on the web refers to the common use of
title in naming elements, but
<link> offers you something more. It’s important to understand how
title works in this context so you can leverage the flexibility it offers.
title allows us to give users a way to access different versions of the page. It does this by assigning a readable name to each variant, so that the visitor can manually select their choice.
This method is useful when you want to specify a default stylesheet for a page, and then offer other options, such as high contrast layouts. Your viewer can then be given a list of choices to control how the page is rendered.
It is also useful when specifying alternative languages, or simply offer customization and control.
Search engines may also use the information to determine how to index or display the content.
Default and Alternate Stylesheets
If you don’t specify a
title for a stylesheet, the browser will consider it to be the default, or persistent, stylesheet for that page. You can use
rel attribute to specify the
alternate stylesheet, and the
title attribute gives each choice a friendly, readable name.
<link rel="stylesheet" type="text/css" href="http://mysite.com/style-regular.css" title="Regular Layout">
<link rel="stylesheet alternate" type="text/css" href="http://mysite.com/style-highcontrast.css" title="High Contrast Layout">
Offering a Choice of Languages
If you are using
<link> to specify
alternate versions of a page, use
title to give each version a friendly title. Again, you would render a menu from these options, allowing the visitor to choose his or her preferred language.
<link rel="alternate" type="text/html" href="http://mysite.com/mypage-fr.htm" hreflang="en" title="French">
<link rel="alternate" type="text/html" href="http://mysite.com/mypage-jp.htm" hreflang="en" title="Japanese">
Rendering the Choices
Once your different
<link> variants have titles, you’ll want to build a list within your page so that visitors can select one of the options.
Some browsers provide a menu option that makes switching stylesheets simple, but not all browsers support this. When it is supported, the options appear in the View menu, under Page Style or Style.
title but may not