HTML Element: <link>
[this page | pdf | back links]
The
HTML <link> element defines
the relationship between a document and an external resource. It is most
commonly used to link to CSS style
sheets. It is an empty element (i.e. it only contains attributes) and should
only appear in the <head>
element of an HTML document (but can appear any number of times there).
The attributes it can take
(other than HTML
global attributes and HTML event attributes)
include:
|
Attribute
|
Description
|
More
|
|
crossorigin
|
Specifies how element
handles cross-origin requests
|
Here
|
|
href
|
URL of
page the link goes to
|
Here
|
|
hreflang
|
Language of linked
document
|
Here
|
|
media
|
Specifies media /
device linked document is optimised for
|
Here
|
|
rel
|
Relationship between
current document and linked document
|
Here
|
|
sizes
|
Specifies size of
linked resource
|
Here
|
|
type
|
Type of element
|
Here
|
It used to support the charset, rev and target
attributes, but these are no longer supported in HTML 5.
To create or access such an element in JavaScript
see here. The
corresponding HTML DOM
object supports standard
DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above
(with the crossorigin property
of the underlying element corresponding to the crossOrigin
property of the DOM object). The default style applicable to this element is
shown here.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<link rel="stylesheet" type="text/css" href="Content/ExampleStyleEMBordered.css">
<!-- the above style sheet contains the following style: em.class1 {border: thin solid blue;} -->
</head>
<body>
Created using HTML:<br>
<em class="class1">bordered in blue, using a linked style sheet in head element accessed via HTML</em>
<br><br>Created using JavaScript:<br>
<em class="class2">bordered in red, using a linked style sheet inserted via JavaScript into head element</em>
<script>
var x = document.createElement("LINK");
x.setAttribute("rel","stylesheet");
x.setAttribute("type","text/css");
x.setAttribute("href","Content/ExampleStyleEMBordered2.css");
document.getElementsByTagName("HEAD")[0].appendChild(x);
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Elements