Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Do not inject block-level HTML into a <p> host element
When using dangerouslySetInnerHTML with arbitrary block markup, render the host as a div (not a default <p>), since block elements inside <p> are invalid HTML.
Bad example
| 1 | // Typography renders a <p> by default |
| 2 | <Typography |
| 3 | variant="i-b1-medium" |
| 4 | dangerouslySetInnerHTML={{ __html: sanitizedHtml }} |
| 5 | /> |
| 6 | // sanitizedHtml may contain <div>, <ul>, <h2>... -> invalid <p> nesting, |
| 7 | // browser auto-closes the <p> and breaks the rendered layout. |
Explanation (EN)
A <p> may only contain phrasing content. Injecting block-level elements makes the browser implicitly close the paragraph, corrupting the DOM and styling.
Objašnjenje (HR)
<p> smije sadrzavati samo phrasing sadrzaj. Ubacivanje block elemenata tjera preglednik da implicitno zatvori paragraf, sto kvari DOM i stiliziranje.
Good example
| 1 | // Render the host as a div so injected block markup is valid |
| 2 | <Typography |
| 3 | as="div" |
| 4 | variant="i-b1-medium" |
| 5 | dangerouslySetInnerHTML={{ __html: sanitizedHtml }} |
| 6 | /> |
Explanation (EN)
Rendering the container as a div allows any sanitized block-level HTML to nest validly, preserving both DOM correctness and layout.
Objašnjenje (HR)
Renderiranje kontejnera kao div omogucuje da bilo koji sanitizirani block HTML bude valjano ugnijezden, cuvajuci ispravnost DOM-a i izgled.
Exceptions / Tradeoffs (EN)
If the injected HTML is guaranteed to be phrasing-only (inline text, <span>, <em>...), a <p> host is fine.
Iznimke / Tradeoffi (HR)
Ako je ubaceni HTML zajamceno samo phrasing (inline tekst, <span>, <em>...), <p> host je u redu.