Linter Rule: Restrict certain elements to the <body> section #378
Description
Rule: html-body-only-elements
Description
Enforce that certain elements only appear inside the <body> section of the document.
Elements such as <header>, <main>, <nav>, <section>, <footer>, <article>, <aside>, <form>, <h1>–<h6>, <p>, <ul>, <table>, and similar content-bearing or interactive elements must be placed inside the <body> tag.
Placing them in <head> or outside of <html> is invalid HTML and relies on error correction from browsers.
Rationale
The HTML specification requires that all visible content and interactive elements appear inside the <body> element.
Placing these elements elsewhere such as inside <head> results in invalid HTML and can cause unpredictable rendering behavior across browsers.
It also impacts accessibility, breaks compatibility with SEO and assistive tools, and relies on browser error correction to work at all.
Enforcing this rule ensures the document has a valid and semantically correct structure that behaves consistently.
Examples
✅ Good
<head>
<title>Page Title</title>
</head>
<body>
<main>
<h1>Welcome</h1>
<p>This is a valid layout.</p>
</main>
</body><body>
<%= render partial: "header" %>
<section>
<%= yield %>
</section>
<%= render partial: "footer" %>
</body>🚫 Bad
<head>
<h1>Welcome</h1>
<p>This paragraph should not be here.</p>
</head><head>
<%= render partial: "navbar" %>
<form action="/submit" method="post">
...
</form>
</head>