<link title="">
- Attribute of
- HTML Link Options Illustrated With Code Examples
- What does
<link title="">do? - Assigns a name to different linked resources so that users can choose between them.
Contents
Giving Users Choice
When the 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.
Essentially, 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.
In other browsers, you’ll need to build a JavaScript drop-down menu to allow the user to switch versions. Note that some browsers claimed to add support for title but may not
