link rel attribute
The rel attribute on the link element:
- allows you to specify the relationship between the linked resource and the current document
- is required if itemprop attribute is not present
- rel is a specific attribute → can be applied ONLY on the next HTML5 elements: a, area, link
link rel attribute values:
- - alternate (the linked resource represents an alternate resource)
- - author (the linked resource has information about the author of the current page)
- - help (the linked resource provides help information for the current page)
- - icon (the linked resource represents an icon -favicon)
- - license (the linked resource has information about the license of the current page)
- - next (the linked resource represents the next page)
- - prefetch (the linked resource will be prefetched)
- - prev (the linked resource represents the previous page)
- - search (the linked resource allows you to search information in the current page and its related pages)
- - stylesheet (the linked resource represents a style sheet for the current page)
Examples
| <link | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 4. | rel | = | alternate, author, help, icon license, next, prefetch, prev search, stylesheet | < rel="icon" href="favicon.png"> |
Video demonstration link rel attribute
HTML5 link rel attribute Tutorial
| min | video details |
|---|---|
| 00:13 | this video tutorial presents all the values of the rel attribute on a link element |
| 00:37 | rel attribute, value: alternate |
| 00:37 | indicates that there's an alternative ("alternate") resource ("index.php"), in french ("fr"), for french visitors |
| 00:50 | rel attribute, value: author |
| 00:52 | indicates that the linked resource ("about_author.php") contains information about the author ("author") of the current document. |
| 01:05 | rel attribute, value: help |
| 01:08 | indicates that the linked resource ("help_page.php") provides help ("help") information for the current document |
| 01:19 | rel attribute, value: icon |
| 01:21 | indicates that the linked resource ("favicon.png") is a representative icon ("icon") for the current document |
| 01:34 | rel attribute, value: license |
| 01:35 | indicates that the linked resource ("license.php") contains information about the document's license ("license") |
| 01:45 | rel attribute, value: next |
| 01:47 | indicates that the linked resource ("page3.php") is the next ("next" resource relative to the current document) |
| 01:58 | rel attribute, value: prev |
| 02:00 | indicates that the linked resource ("page1.php") is the previous ("prev" resource relative to the current document) |
| 02:11 | rel attribute, value: prefetch |
| 02:14 | indicates that the linked resource ("big_file.css") will be prefetched ("prefetch") when the current document will be requested by browser |
| 02:04 | big_file.css is a big css file (382 KB) and it is very likely to be requested next, (e.g. most probably a user will click on an html page that require this css file) thus we decided to prefetch it |
| 02:33 | rel attribute, value: search |
| 02:36 | indicates that the linked resource ("search.php") allows users to perform search ("search") activities inside the current page and its related pages |
| 02:45 | rel attribute, value: stylesheet |
| 02:47 | indicates that the linked resource ("main.css") represents a style sheet ("stylesheet") for the current document |
| 02:53 | the "main.css" file applies to the html page, styling it |