Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2universalStack: react
htmlsemanticsseomicrodataaccessibility
Use semantic description lists and microdata for label/value data
Render label/value pairs with <dl>/<dt>/<dd> and add schema.org microdata (itemscope/itemprop) for SEO instead of generic divs.
PR: hegnar-web · org-mining-hist-2026-06Created: Jun 19, 2026
Bad example
Old codetsx
| 1 | {list.map(({ label, value }) => ( |
| 2 | <div key={label}><span>{label}</span><span>{value}</span></div> |
| 3 | ))} |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | <dl itemScope itemType="https://schema.org/JobPosting"> |
| 2 | {list.map(({ label, value, key }) => ( |
| 3 | <React.Fragment key={label}> |
| 4 | <dt>{label}</dt> |
| 5 | <dd itemProp={key}>{value}</dd> |
| 6 | </React.Fragment> |
| 7 | ))} |
| 8 | </dl> |
Explanation (EN)
Objašnjenje (HR)