🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

📖 INDEX

# helloworld
# comments-html
# html-tag
# head-tag
# body-tag
# p-tag
# b-tag
# i-tag
# strong-tag
# em-tag
# s-tag
# cite-tag
# blockquote-tag
# sub-tag
# sup-tag
# u-tag
# big-tag
# tt-tag
# pre-tag
# q-tag
# code-tag
# samp-tag
# var-tag
# abbr-tag
# acronym-tag
# address-tag
# ins-tag
# strike-tag
# span-tag
# hr-tag
# title-tag
# meta-tag
# base-tag
# link-tag
# a-tag
# script-tag
# noscript-tag
# style-tag
# div-tag
# h1-tag
# h2-tag
# h3-tag
# h4-tag
# h5-tag
# h6-tag
# ul-tag
# ol-tag
# li-tag
# dl-tag
# dt-tag
# dd-tag
# menu-tag
# dir-tag
# table-tag
# tr-tag
# th-tag
# td-tag
# thead-tag
# tbody-tag
# tfoot-tag
# caption-tag
# col-tag
# colgroup-tag
# form-tag
# input-tag
# textarea-tag
# select-tag
# option-tag
# button-tag
# label-tag
# fieldset-tag
# legend-tag
# datalist-tag
# optgroup-tag
# radio-buttons
# checkboxes
# submit
# reset
# input-types
# input-attributes
# meta-tags
# open-graph
# twitter-cards
# geotagging
# img-tag
# video-tag
# audio-tag
# iframe-tag
# map-tag
# area-tag
# object-tag
# param-tag
# applet-tag
# controls
# autoplay
# loop
# muted
# poster
# src
# type
# javascript-in-html
# basefont-tag
# bdo-tag
# font-tag
# frame-tag
# frameset-tag
# noframes-tag
LOADING ENGINE...

<link>

AI & DATA SCIENCE // link-tag

The <link> element links an external resource to the document — most commonly a stylesheet, but also favicons, preloaded assets, and canonical URLs.

Syntax

<link rel="stylesheet" href="/styles.css">
<link rel="icon" href="/favicon.ico">

Deep Dive Course

**`<link>`** is a void element, almost always placed in `<head>`, that connects the current document to an external resource. The **`rel`** attribute defines the relationship: `rel="stylesheet"` loads CSS, `rel="icon"` sets the favicon, `rel="canonical"` tells search engines the preferred URL for duplicate/similar content, and `rel="preload"` hints the browser to fetch a critical resource earlier than it normally would.

1Understanding <link>

`<link>` is a void element, almost always placed in <head>, that connects the current document to an external resource. The `rel` attribute defines the relationship: rel="stylesheet" loads CSS, rel="icon" sets the favicon, rel="canonical" tells search engines the preferred URL for duplicate/similar content, and rel="preload" hints the browser to fetch a critical resource earlier than it normally would.

💡

rel="canonical" is one of the most important SEO tags on a site with any URL variations (with/without trailing slash, query params, etc.) — it tells Google which version is the 'real' one to index and rank.

editor.html
<head>
  <link rel="stylesheet" href="/styles.css">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="canonical" href="https://example.com/page">
</head>
localhost:3000

2Practical Example

Here is a real-world application of <link> showing how it is used in production HTML.

editor.html
<!-- Preloading a critical font for faster rendering -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
localhost:3000

3Best Practices

Follow these guidelines when working with <link>:

1. Load your main stylesheet via <link rel="stylesheet"> in <head> so styles apply before content paints

2. Always set a favicon with <link rel="icon">

3. Use <link rel="canonical"> on pages that could be reached via multiple URLs to avoid duplicate-content SEO issues

⚠️

Tip: rel="canonical" is one of the most important SEO tags on a site with any URL variations (with/without trailing slash, query params, etc.) — it tells Google which version is the 'real' one to index and rank.

editor.html
<head>
  <link rel="stylesheet" href="/styles.css">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="canonical" href="https://example.com/page">
</head>
localhost:3000

Examples

Example 01Basic Usage
<head>
  <link rel="stylesheet" href="/styles.css">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="canonical" href="https://example.com/page">
</head>
Example 02Advanced Example
<!-- Preloading a critical font for faster rendering -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

Best Practices

  • Load your main stylesheet via in so styles apply before content paints
  • Always set a favicon with
  • Use on pages that could be reached via multiple URLs to avoid duplicate-content SEO issues

Interview Question

What does rel="canonical" solve, and why does it matter for SEO?▼

Hint: Think about a site where the same content is reachable at multiple different URLs.

Many sites unintentionally serve the same content at multiple URLs — with or without a trailing slash, with tracking query parameters, via HTTP and HTTPS, etc. Without guidance, search engines may split ranking signals across these duplicate URLs or pick the 'wrong' one to show in results. <link rel="canonical" href="..."> explicitly tells search engines which URL is the authoritative version, consolidating ranking signals onto that one URL.

Exercises

EasyPractice using <link> in a real scenario.
View Solution
<head>
  <link rel="stylesheet" href="/styles.css">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="canonical" href="https://example.com/page">
</head>

Frequently Asked Questions

What does rel="canonical" solve, and why does it matter for SEO?▼

Many sites unintentionally serve the same content at multiple URLs — with or without a trailing slash, with tracking query parameters, via HTTP and HTTPS, etc. Without guidance, search engines may split ranking signals across these duplicate URLs or pick the 'wrong' one to show in results. explicitly tells search engines which URL is the authoritative version, consolidating ranking signals onto that one URL.

Related Functions

head-tagstyle-tagMETA Tags