The link element in head declares relationships to other resources. Common examples connect a stylesheet or identify a favicon for the browser tab.
What You Need to Know
The rel keyword describes the relationship, while href gives the path. An ordinary navigation link uses an a element in body instead.
A link element loads a resource relationship; a body a element creates clickable navigation. They are not interchangeable.
Example: See It in Action
Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<head>
<link rel="stylesheet" href="css/site.css">
<link rel="icon" href="favicon.ico" sizes="any">
<title>My Website</title>
</head>Let’s Understand the Example
- A link element points to a related resource, often a stylesheet or an icon. It does not make a clickable link in the page body.
- The head contains useful page information for the browser, such as its title and character encoding.
- The title names the page in the browser tab. It is different from the heading shown on the page.
- Rel describes a relationship to the linked page or resource, including security and search hints.
- Href contains the destination of a link. A value starting with # points to an id on the same page.
- Sizes provides a browser hint about an image display width or icon size, depending on the element.
Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.
What Should You See?
The browser tab should show “My Website”.
Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.
Try It Yourself
- Move a CSS file into a folder and correct its href path.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Using link instead of a when you want visitors to click to another page.
- The title in the browser tab and the heading visible in the page are different pieces of information.
Key Takeaways
- The link element in head declares relationships to other resources.
- A link element points to a related resource, often a stylesheet or an icon. It does not make a clickable link in the page body.
- A link element loads a resource relationship; a body a element creates clickable navigation. They are not interchangeable.