HTML Guides for p
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
The HTML specification defines two distinct content models for the <noscript> element based on its location in the document. When <noscript> appears inside <head>, it inherits the restrictions of the <head> element itself — only metadata content is permitted. This means elements like <link>, <style>, and <meta> are allowed, but flow content like <p>, <div>, <h1>, or any other body-level element is not. When <noscript> appears inside <body>, it follows the more permissive rules of flow content and can contain paragraphs, headings, and other visible elements.
This distinction exists because the <head> section is strictly reserved for metadata that describes the document — it is never rendered as visible page content. Placing a <p> tag inside a <noscript> in <head> violates this principle. Browsers may handle this inconsistently: some might silently ignore the invalid content, while others might force the <head> to close prematurely and push the content into the <body>, causing unexpected layout issues and potentially disrupting other metadata elements that follow.
This is also an accessibility concern. Screen readers and other assistive technologies rely on a well-structured document where the <head> contains only metadata and all visible content lives in the <body>. Invalid nesting can confuse these tools and lead to content being skipped or misinterpreted.
How to Fix It
You have two main approaches:
-
Keep <noscript> in <head> but use only metadata elements. This is ideal when you need to load a fallback stylesheet or add a <meta> redirect for users without JavaScript.
-
Move the <noscript> block into <body> if you need to display visible text or other flow content to the user.
Examples
❌ Incorrect: Flow content inside <noscript> in <head>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<p>JavaScript is disabled.</p>
</noscript>
</head>
<body>
</body>
</html>The <p> element is flow content and is not allowed inside <noscript> when it sits within <head>.
✅ Correct: Metadata-only <noscript> in <head>
If your goal is to provide a fallback stylesheet or redirect when JavaScript is unavailable, use only metadata elements:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<link rel="stylesheet" href="no-js-fallback.css">
</noscript>
</head>
<body>
</body>
</html>You can also use <style> or <meta> inside the <noscript> in <head>:
<head>
<title>Example</title>
<noscript>
<style>
.js-only { display: none; }
.no-js-message { display: block; }
</style>
</noscript>
</head>✅ Correct: Textual fallback in <noscript> inside <body>
When you need to show a visible message to users who have JavaScript disabled, place the <noscript> block in the <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<noscript>
<p>This site requires JavaScript to function properly. Please enable JavaScript in your browser settings.</p>
</noscript>
</body>
</html>✅ Correct: Combining both approaches
For a comprehensive fallback strategy, you can use <noscript> in both locations — metadata in <head> and visible content in <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<link rel="stylesheet" href="no-js-fallback.css">
</noscript>
</head>
<body>
<noscript>
<p>JavaScript is disabled. Some features may not be available.</p>
</noscript>
</body>
</html>This gives you the best of both worlds: styling adjustments via the <head> fallback and a user-facing message via the <body> fallback.
The HTML specification defines <p> as an element that can only contain phrasing content — essentially inline elements like <span>, <a>, <strong>, <em>, and text. When the parser encounters a block-level element (such as <div>, <ul>, <ol>, <table>, <blockquote>, or another <p>) inside a <p>, it automatically closes the <p> element before the block-level element. This implicit closure means that a </p> tag appearing after the block-level element has no matching open <p> to close.
Understanding this behavior is important because it can lead to unexpected DOM structures. Browsers will still render the page, but the actual DOM tree may differ from what you intended, potentially affecting CSS styling and JavaScript DOM manipulation. It also signals structural problems in your markup that can hurt accessibility, since assistive technologies rely on a well-formed document tree.
There are three common causes of this error:
- Duplicate closing tags — A simple typo where </p> appears twice.
- Block-level elements inside <p> — Nesting a <div>, <ul>, <table>, or similar element inside a paragraph causes the browser to implicitly close the <p> before the block element, leaving the explicit </p> orphaned.
- Mismatched or misordered tags — Other nesting errors that leave a </p> without a corresponding opening tag.
Examples
Duplicate closing tag
The simplest case — an extra </p> with no matching opening tag:
<!-- ❌ Bad: duplicate end tag -->
<p>Some text.</p></p><!-- ✅ Good: single end tag -->
<p>Some text.</p>Block-level element nested inside a paragraph
This is the most common and least obvious cause. When a <div> (or other block-level element) appears inside a <p>, the parser closes the <p> implicitly:
<!-- ❌ Bad: div inside p causes implicit closure -->
<p>
Some introductory text.
<div class="highlight">Highlighted content</div>
</p>The parser interprets this as:
<p>Some introductory text.</p>
<div class="highlight">Highlighted content</div>
</p> ← orphaned end tag, triggers the errorTo fix this, either replace the outer <p> with a <div>, or replace the inner <div> with a <span>:
<!-- ✅ Good: use div as the outer container -->
<div>
<p>Some introductory text.</p>
<div class="highlight">Highlighted content</div>
</div><!-- ✅ Good: use span instead of div for inline styling -->
<p>
Some introductory text.
<span class="highlight">Highlighted content</span>
</p>List nested inside a paragraph
Lists are block-level elements and cannot be nested inside <p>:
<!-- ❌ Bad: ul inside p -->
<p>
Choose one of the following:
<ul>
<li>Option A</li>
<li>Option B</li>
</ul>
</p><!-- ✅ Good: separate the paragraph and list -->
<p>Choose one of the following:</p>
<ul>
<li>Option A</li>
<li>Option B</li>
</ul>Orphaned end tag from a deleted opening tag
Sometimes during editing, the opening <p> gets accidentally removed:
<!-- ❌ Bad: missing opening tag -->
<div>
Some text that lost its opening tag.
</p>
</div><!-- ✅ Good: restore the opening tag or remove the closing tag -->
<div>
<p>Some text with its opening tag restored.</p>
</div>When debugging this error, look at the line number reported by the validator and trace backward. If you see a </p> on that line, check whether there’s a valid opening <p> for it, and verify that no block-level elements between the opening and closing tags could have caused an implicit closure.
Ready to validate your sites?
Start your free trial today.