- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <link> Tag
The HTML <link> tag specifies a relationship between the current document and an external resource. The <link> tag is mostly used to link stylesheets. It is also used to set site icons (both favicon-style icons and icons for the home screens and apps on mobile).
The <link> tag includes the global attributes as follows
- rel − This attribute stands for a relationship of the linked document to the current document.
- href − This attribute specifies the URL of the linked resource.
- sizes − This attribute defines the sizes of the icons for visual media contained in the resource.
- type − This attribute is used to define the type of the content to be linked.
- title − The title attribute has special semantics on the <link> element.
Syntax
Following is the syntax for HTML <link> tag −
<link href="..." rel=".."/>
Example
In the following example, we are creating an external resource link element using the <link> tag to link the CSS file with the HTML file. We pass the CSS file name "style.css" as a source to the href attribute and pass the "stylesheet" to the rel attribute source.
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Anchor Tag</title> <!--create a link tag--> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> </body> </html>
style.css
body{ background-color: green; } h1{ color: white; font-size: 40px; }
When we run the above code, it will generate an output consisting of the text with a CSS property displayed on the webpage.
Example
Following is another example of the HTML <link> tag. Here, we are establishing the favicon on the browser using the <link> tag with its rel and href attribute. We have given the local image name "download.png" as the link destination to the href attribute and given the rel attribute source as "icon".
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Anchor Tag</title> <!--create a link tag--> <link rel="icon" type="image/x-icon" href="download.png"> <style> body { background-color: aquamarine; font-family: initial; font-size: 20px; } </style> </head> <body> <h1> The <pre> <link> </pre> tag with the favicon icon...... </h1> </body> </html>
On running the above code, the output window will pop up displaying the text with a CSS property on the webpage.
Example
In this example, we are creating an external resource link using the <link> tag with its rel, href, and sizes attribute to establish and manage the size of the favicon on the browser.
<!DOCTYPE html> <html lang="en"> <head> <title>Link Tag</title> <!--create a link tag--> <link rel="icon" type="image/x-icon" href="simply-easy-learning.png" sizes="500x500"> <style> body { background-color: rgb(14, 116, 211); font-family: initial; font-size: 16px; color: white; } </style> </head> <body> <h1>favicon with <pre> <link> </pre> tag </h1> </body> </html>
When we run the above code, it will generate an output consisting of the text with a CSS property displayed on the webpage.
Example
You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example −
If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Link Tag</title> <!--create a link tag--> <link href="print.css" rel="stylesheet" media="print" /> <link href="style.css" rel="stylesheet" media="screen and (max-width: 680px)" /> </head> <body> <h1>The <pre> <link> </pre> tag with media attribute </h1> </body> </html>
print.css
body{ background-color: aquamarine; color: white; }
style.css
body{ background-color: green; } h1{ color: white; font-size: 40px; }
On running the above code, the output window will pop up displaying the text with a CSS property on the webpage.
To Continue Learning Please Login
Login with Google