Linter Rule: No block elements inside inline elements

Rule: html-no-block-inside-inline

Description

Prevent block-level elements from being placed inside inline elements.

Rationale

Placing block-level elements (like <div>, <p>, <section>) inside inline elements (like <span>, <a>, <strong>) violates HTML content model rules and may lead to unpredictable rendering behavior across browsers.

This practice can cause:

• Invalid HTML that fails validation
• Inconsistent rendering across different browsers
• Layout issues and unexpected visual results
• Accessibility problems with screen readers

Examples

✅ Good

<span>
  Hello <strong>World</strong>
</span>

<div>
  <p>Paragraph inside div (valid)</p>
</div>

<a href="#">
Add an `href` attribute to `<a>` to ensure it is focusable and accessible. Links should go somewhere, you probably want to use a `<button>` instead. (html-anchor-require-href)
  <img src="icon.png" alt="Icon">
  <span>Link text</span>
</a>

🚫 Bad

<span>
  <div>Invalid block inside span</div>
</span>

<span>
  <p>Paragraph inside span (invalid)</p>
</span>

<a href="#">
Add an `href` attribute to `<a>` to ensure it is focusable and accessible. Links should go somewhere, you probably want to use a `<button>` instead. (html-anchor-require-href)
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</a>

<strong>
  <section>Section inside strong</section>
</strong>

References

• HTML Living Standard - Content models
• MDN - Block-level elements
• MDN - Inline elements