Skip to content

html-no-block-inside-inline.md

Latest commit

 

History

History
66 lines (47 loc) · 1.42 KB

html-no-block-inside-inline.md

File metadata and controls

66 lines (47 loc) · 1.42 KB

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="#">
  <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="#">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</a>

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

References