About This HTML Issue
The <link> element is used to define relationships between the current document and external resources — most commonly stylesheets, favicons, and preloaded assets. According to the HTML specification, <link> elements belong in the <head> section of a document (with a narrow exception for body-ok link types like certain rel="stylesheet" uses, though validators still expect them in the <head> for clarity and correctness).
This error typically happens in a few common scenarios:
-
A
<link>tag is accidentally placed inside the<body>element. -
A
<link>tag appears after the closing</head>tag but before the<body>tag. -
A
<link>tag is placed after the closing</html>tag, often by a CMS, template engine, or plugin injecting code at the end of the document. -
The
</head>tag is missing or misplaced, causing the browser to implicitly close the<head>before reaching the<link>.
When the validator encounters a <link> element outside its expected context, it reports it as a “stray” start tag — meaning the element has been found somewhere it doesn’t belong.
Why this matters
Standards compliance: The HTML specification defines <link> as metadata content that belongs in <head>. Placing it elsewhere produces invalid HTML.
Unpredictable behavior: Browsers will attempt to handle misplaced <link> elements, but the behavior can be inconsistent. A stylesheet <link> found in the <body> may trigger a flash of unstyled content (FOUC) as the browser re-renders the page after discovering the new stylesheet.
Performance: Stylesheets linked from the <head> are discovered early during parsing, allowing the browser to fetch and apply them before rendering begins. Misplaced <link> elements can delay resource loading and degrade the user experience.
Maintainability: Keeping all <link> elements in the <head> makes the document structure predictable and easier for other developers to maintain.
How to fix it
-
Locate the stray
<link>element — the validator will indicate the line number where the issue occurs. -
Move it into the
<head>section — place it after the opening<head>tag and before the closing</head>tag. -
Check that your
</head>tag exists and is in the right place — a missing or misplaced</head>can cause elements you thought were in the head to actually end up in the body. -
Review template or CMS output — if you use a static site generator, CMS, or framework, check that plugins or includes aren’t injecting
<link>tags outside the<head>.
Examples
❌ <link> placed inside the <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<link rel="stylesheet" href="css/app.css">
<h1>Hello</h1>
</body>
</html>
❌ <link> placed after the closing </html> tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
<link rel="stylesheet" href="css/app.css">
❌ Missing </head> causes <link> to become stray
In this example, the </head> tag is missing. The browser encounters the <body> tag and implicitly closes the <head>, but the <link> after it becomes stray content between the implicit head closure and the body.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<body>
<link rel="stylesheet" href="css/app.css">
<h1>Hello</h1>
</body>
</html>
✅ Correct: all <link> elements inside <head>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<link rel="stylesheet" href="css/app.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<h1>Hello</h1>
</body>
</html>
All <link> elements are placed within the <head> section, the </head> closing tag is present, and the document structure is clean and valid.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.