We specify the relationship between the current document and the target URL by using a <link> tag in HTML. A link tag is used to define a link between a document and an external resource. It is used only when the href attribute is present.
Approach:
- To specify the relationship between the current and the linked document use the rel attribute
Attribute Values:
- alternate: It specifies the alternative link of the document(i.e. print page, translate, or mirror).
- author: It defines the author of the link
- dns-prefetch: It Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin
- help: It specifies a link to a help document. Example: <link rel=”help” href=”/help/”>
- icon: It specifies an import icon in a given document
- license: It specifies a link to copyright information for the document
- next: It provides the link to the next document in series
- pingback: It specifies the address of the pingback serve
- preconnect: It specifies the target should be preemptive to the origin resource
- prefetch: It specifies that the target document should be cached.
- preload: It specifies that the browser must preemptively fetch and cache
- prerender: It specifies that the browser should load
- prev: It specifies the previous document in a selection
- search: It specifies the search tool for the document.
- stylesheet: It Imports a style sheet
Syntax:
<link rel="stylesheet" type="text/css" href="styles.css">
Example 1: In this example, we will specify the relationship between the current document and the target URL
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
type="text/css" href="styles.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
How to specify the relationship between the current
document and the target URL in HTML5?
</h2>
</body>
</html>
|
CSS Code: The following is the content for the code “styles.css” used in the above HTML code.
h1 , h2
{
color:green;
text-align: center;
font-style: italic;
font-weight: bold;
}Output:
link document
Example 2: In this example, we will see the use of <link> tag in HTML.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
type="text/css"
href="index_screen.css">
<link rel="stylesheet"
type="text/css"
href="index_print.css">
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
target="_blank">
Click here
</a>
</center>
</body>
</html>
|
Output: