This is a practical reference for describe how a link or resource relates to this page. Keep it nearby when you are writing a page, but do not worry about memorizing every entry at once.
What this reference covers
Describe how a link or resource relates to this page. The entries below summarize the most useful choices and what each one means.
| Value or item | What it means |
|---|---|
stylesheet | Load CSS |
icon | Page icon |
canonical | Preferred URL hint |
alternate | Alternative version |
preload | Early resource hint |
modulepreload | Preload JS module dependencies |
preconnect | Connect to origin early |
dns-prefetch | Resolve origin early |
prefetch | Fetch likely next resource |
noopener | Prevent opener access |
noreferrer | Suppress referrer and opener access |
nofollow | Crawler link directive |
ugc | User-generated link |
sponsored | Paid link relationship |
See it in HTML
A small example shows how one of these ideas appears in a normal page:
<link rel="stylesheet" href="/css/site.css">
<link rel="canonical" href="https://example.test/guides/html">How to use the reference
Begin by identifying what the page is trying to achieve. Then choose the entry that describes that job, instead of choosing a setting merely because it looks familiar.
Read the code from the outer element inward. Pay attention to attribute names, tag nesting, and any links between elements through IDs. A browser may accept some incorrect markup, but accepting it is not the same as using it correctly.
A useful check before publishing
Try changing one choice in the example while keeping the rest of the page the same. Inspect the result in your browser. For compatibility-sensitive features, test another browser; for accessibility-sensitive features, use keyboard navigation and an accessibility inspector.
Some entries describe browser hints rather than guarantees. User input still needs server-side validation, and event-based behavior needs JavaScript even if the HTML describes the control.
Common Beginner Mistakes
- Treating every item in a reference list as interchangeable instead of choosing the one that matches the job.
- Copying reference markup without checking the element’s surrounding context or required attributes.
- Assuming one successful browser test proves the markup is accessible or universally supported.
Key Takeaways
- Describe how a link or resource relates to this page.
- Pick a setting for its meaning, then test the smallest working example.
- HTML references are most useful when combined with validation, browser inspection, and accessibility testing.