link
HTML5 link element
The link element allows you to link resources to your web page. »video
Examples link
- link a CSS file to your page and the style defined in this CSS file will apply to your page;
- link a favorite icon to your page to represent it and the browser will display it
- link another page to the current page, indicating it's the next one or the previous one..
- link another page to the current page, indicating that the linked page holds information about the author of the document, or license..
- link a resource you're almost sure will be requested next and the browser will prefetch it; etc... »video
About link
- is an optional element »video
- multiple link elements allowed per HTML5 document
Display & support link
- display in browser »video
- display: none
Parents, link
- link nested within elements »link parents
»examples
»video
Attributes link
- required: href AND one of the two: rel OR itemprop
- optional: rel or itemprop; hreflang, media, type, sizes, crossorigin; global attributes, event attributes
Observation: sizes attribute currently not supported in browser.
Understanding link's attributes:
- the href attribute holds the URL of the linked resource »video
- the itemprop attribute allows you to add a property to an item (microdata), making your page's content machine-readable »video
- the rel attribute allows you to specify the relationship between the linked resource and the current document »video
For this linked resource you can specify also the followings:
- its language through hreflang attribute »video
- its media through media attribute »video
- its MIME type through type attribute »video
- its size if the linked resource represents an icon through sizes attribute (!! no browser support)
- its origin through crossorigin attribute
- its title through title attribute (global attribute) »video
link's attributes: 2 examples and interpretation
- 1st example: <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
2nd example: <link rel="stylesheet" type="text/css" href="main.css" hreflang="en" media="print"> »video
Warnings
- link element must have the href attribute, otherwise the link element does not create a link:
<link rel="stylesheet" href="style.css"> - besides href, link element must have either a rel attribute either an itemprop attribute:
<link rel="icon" href="image.png"> OR
<link itemprop="URL" href="http://..."> - 1 link element cannot have more than 1 external resource linked, 1 href :
<link rel="next" href="page3.php"> - 1 linked external resource may have multiple relationships 1 rel with multiple values with the current page:
<link rel="author license" href="author_license.php"> - multiple link elements are allowed both in head (rel, itemprop) and body(itemprop) sections:
head: <link rel="" href=""> ⁄ <link itemprop="" href="">
body: <link itemprop="" href=""> ⁄ <link itemprop="" href=""> - link elements create hyperlinks (resources displaying in a new page via a hyperlink) or external resource links (resources imported into the current page):
hyperlinks: <link rel="next" href="page3.php">
external links: <link rel="stylesheet" href=style.css"> - some linked resources display in browser (external resource links) some others don't (hyperlinks, invisible links via itemprop) (useful for user agents (search engine spiders, crawlers..)):
displays: <link rel="icon" href="favicon.png">
does not display: <link rel="prev" href="page1.php"> ⁄ <link itemprop="adress" >
links difference
The difference between a hyperlink and an external resource link »video
Syntax link
| 1 | <> »example |
Attributes and Values link (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| 1. | href | = | URL | »video | < rel="next" href="page2.php"> | |
| 2. | hreflang | = | language code | »video | < rel="alternate" href="URL" hreflang="language_code"> | |
| 3. | media | = | all, braille, embossed, handheld print, projection, screen, speech tty, tv | »video | < rel="stylesheet" href="URL" media="print"> | |
| 4. | rel | = | alternate, author, help, icon license, next, prefetch, prev search, sidebar, stylesheet | »video | < rel="icon" href="favicon.png"> | |
| 5. | type | = | MIME type | »video | < type="text⁄css" rel="stylesheet" href="URL"> | |
| 6. | sizes | = | pixels (widthxheight) | - | < rel="icon" href="favicon.ico" sizes="16x16"> | |
| 7. | crossorigin | = | "", , anonymous, use-credentials | - | < rel="stylesheet" href="URL" crossorigin> | |
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | ||
| 2. | class | = | class name | »html »img | ||
| 3. | contenteditable | = | "", , true, false | »html | ||
| 4. | contextmenu | = | menu id value | »html | ||
| 5. | data-* | = | value | - | ||
| 6. | dir | = | ltr, rtl, auto | »html | ||
| 7. | draggable | = | true, , false | »img | ||
| 8. | dropzone | = | copy, move, link, string:, file: | - | ||
| 9. | hidden | = | "", , hidden | »html »img | ||
| 10. | id | = | id name | »html »img | ||
| 11. | itemid | = | URL | - | ||
| 12. | itemprop | = | string | »link »a | < itemprop="url" href="http://..."> | |
| 13. | itemref | = | string | - | ||
| 14. | itemscope | = | "", , itemscope | - | ||
| 15. | itemtype | = | absolute URL | - | ||
| 16. | lang | = | language code | »html »head»title »img | ||
| 17. | spellcheck | = | "", , true, false | »html | ||
| 18. | style | = | CSS property:value | »html »img | ||
| 19. | tabindex | = | integer | »img | ||
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < rel="next" href="x.php" title="X Page"> | |
| 21. | translate | = | "", yes, no | »html »img | ||
| All Global Attributes | ||||||
| 3. global event attributes | ||||||
| 1. | onclick | = | script | » list | <element onclick="script" > ... | |
| 2. | ondblclick | = | script | » list | <element ondblclick="script" > ... | |
| All Event Attributes | ||||||
Video demonstration link element
HTML5 link element: linking a CSS file and an icon to the page
| min | video details |
|---|---|
| 00:05 | we will link the 2 resources (main.css, favicon.png) to index.html file |
| 00:10 | open index.html in browser |
| 00:14 | for now index.html is not styled |
| 00:22 | LINKING 1st RESOURCE to index.html |
| 00:22 | let's link main.css file to index.html |
| 00:27 | adding link start tag in head section |
| 00:29 | adding the required href attribute which allows us to add the path of the resource we're about to link to our page |
| 00:31 | adding the resource's path: "main.css" |
| 00:31 | Note: when the resource to be linked (main.css) and the page to which this resource will link (index.html) are in the same folder, then the path of the resource (main.css) corresponds to the name of that resource (main.css) |
| 00:35 | adding the resource MIME type through type attribute |
| 00:41 | text⁄css represents the Media (MIME) Type of main.css; this information is purely advisory (for user agents only) |
| 00:45 | adding the required rel attribute to link element |
| 00:46 | specifying what main.css (the linked resource) represents for index.html: a CSS style sheet |
| 00:54 | DONE! main.css has been successfully linked to our html document |
| 01:00 | test |
| 01:02 | test result: ok the CSS rules defined inside main.css file apply to our html page |
| 01:07 | view: before linking the resource and after linking it |
| 01:15 | LINKING the 2nd RESOURCE to index.html |
| 01:15 | let's link now the favicon.png to the html file |
| 01:18 | adding the link tag |
| 01:20 | adding resource path (required) |
| 01:30 | adding resource MIME type (optional) |
| 01:38 | specifying resource relationship with the html page (required) |
| 01:45 | DONE! favicon.png has been successfully linked to our html document |
| 01:49 | test |
| 01:52 | test result: ok the representative icon linked to our html file displays in browser tab |
| 01:55 | view: before linking the resource and after linking it |
For more information about the element, please see the specs: W3C ⁄ WHATWG