セマンティックHTML

原則

意味のある構造には<div>ではなく、なるべくセマンティックHTML要素を使ってください。 <div>にコメントで意味を補足するぐらいなら、適切な要素を選ぶべきです。セマンティック要素はアクセシビリティツール、LLM、人間のいずれにとっても読みやすくなります。

<div>はスタイリング目的のグルーピングなど、意味を持たないコンテナとしてのみ使います。

ページの主要コンテンツです。 1ページにつき1つだけ使います。

<main>
  <h1>ページタイトル</h1>
  <section>...</section>
  <section>...</section>
</main>

独立して意味をなすコンテンツです。ブログ記事、コメント、カードなどが該当します。

<article>
  <h3>記事タイトル</h3>
  <p>{content}</p>
</article>

[Description truncada. Veja o README completo no GitHub.]