html tutorial - Link <link> tag in HTML - html5 - html code - html form



  • The <link> tag make a link between a document and an external resource.
  • External style sheets are linked by <link> tag.
  • The <link> tag supports Global Attributes and Event Attributes.
  • <link>element belongs to Metadata content category.
html link

Syntax for <link> tag:

<link rel=”stylesheet” type=”text/css” href=”filename”>

Differences between HTML 4.01 and HTML5 for <link> tag:

HTML 4.01

  • The <link> tag is not supported.

HTML5

  • The “sizes” attribute is new in HTML5.

Sample Coding for <link> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <link rel=”stylesheet” type=”text/css” href=”link_css.css”>
    </head>
    <body>
        <h1>link tag is used to link to external style sheets</h1>
        <p>link tag is used to link to external style sheets</p>
    </body>
</html>

Sample coding for <link> tag link_css.css:

h1
  {
    color: blue;
    border: '1pt solid black'
}
p
  {
    color: red;
    background-color: #EFE7D6;
    border: '1pt solid black '
}

Code Explanation for <link> tag:

code explanation for link tag

  1. <link> tag used to link an external resource document.
  2. “rel” attribute used to define the relationship between the documents.
  3. "href” used to location of the linked document.
  4. code explanation for link tag
  5. h1 block used to set color and border for the <h1> tag.
  6. p block used to set color, background color and border for the <p> tag.

Output of <link> tag:

output for link tag

  1. <h1> contents are displayed in blue color.
  2. <p> contents are displayed in red color with background-color. Paragraph tag is specified in red colour as the content displays red in the output.

Attribute for <link>tag:

Attribute Value HTML4 HTML5 Description
charset char_encoding Yes No Specifies the character encoding of the linked document
crossorigin crossorigin No Yes Specifies how the element handles cross-origin requests
href URL Yes Yes Specifies the location of the linked document
hreflang language_code Yes Yes Specifies the language of the text in the linked document
media media_query Yes Yes Specifies on what device the linked document will be displayed
rel alternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
Yes Yes Required. Specifies the relationship between the current document and the linked document
rev reversed relationship Yes No Specifies the relationship between the linked document and the current document
sizes HeightxWidth
any
No Yes Specifies the size of the linked resource. Only for rel="icon"
target _blank
_self
_top
_parent
frame_name
Yes No Specifies where the linked document is to be loaded
type media_type Yes Yes Specifies the media type of the linked document

Browser Support for <link> tag:

Yes Yes Yes Yes Yes

Related Searches to link in html