セマンティックHTML
原則
意味のある構造には<div>ではなく、なるべくセマンティックHTML要素を使ってください。 <div>にコメントで意味を補足するぐらいなら、適切な要素を選ぶべきです。 セマンティック要素はアクセシビリティツール、LLM、人間のいずれにとっても読みやすくなります。
<div>はスタイリング目的のグルーピングなど、意味を持たないコンテナとしてのみ使います。
要素の使い分け
<main>
ページの主要コンテンツです。 1ページにつき1つだけ使います。
<main>
<h1>ページタイトル</h1>
<section>...</section>
<section>...</section>
</main><article>
独立して意味をなすコンテンツです。 ブログ記事、コメント、カードなどが該当します。
<article>
<h3>記事タイトル</h3>
<p>{content}</p>
</article>`<s
[Description truncada. Veja o README completo no GitHub.]