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.
A <p> element cannot be placed inside a <noscript> tag within the <head> section.
According to the HTML specification, the <head> element must only contain metadata, such as <title>, <meta>, <link>, <script>, and <style>. The <noscript> element is allowed in <head>, but it must only contain elements that are valid in head, not flow content like <p>. The <p> (paragraph) tag is flow content meant for the <body>. For fallback content in <head>, only metadata elements are allowed.
Incorrect example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<p>JavaScript is disabled.</p>
</noscript>
</head>
<body>
</body>
</html>Correct approaches:
-
Remove the <p> from <noscript> in <head>:
- If you must include fallback styles or links in case JavaScript is disabled, use only metadata tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<noscript>
<link rel="stylesheet" href="no-js.css">
</noscript>
</head>
<body>
</body>
</html>-
Place textual fallback content in the <body> instead:
- Moving the <noscript> block with flow content (such as <p>) to the body ensures validity.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<noscript>
<p>JavaScript is disabled.</p>
</noscript>
</body>
</html>Remember: Do not use <p> (or any flow content) in <noscript> inside <head>. Use such content only in the body.
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.