セマンティック HTML とは、コンテンツの意味や構造を明確に伝える HTML 要素を適切に使用することです。<div> や <span> の代わりに、<header>、<nav>、<main>、<article>、<section> などの意味を持つ要素を使います。

セマンティック HTML は SEO とアクセシビリティの両方に貢献します。検索エンジンはページの構造を理解しやすくなり、スクリーンリーダーはランドマーク (目印) として各セクションを認識できます。HTML5 セマンティクスの書籍で詳しく学べます。

見出し要素 (<h1>〜<h6>) の適切な階層構造も重要です。見出しレベルを飛ばさず、論理的な順序で使用することで、文書構造が明確になります。

文字数カウントの観点では、セマンティック要素のタグ名は <div> より長いですが、コンテンツの意味を正確に伝えるメリットが上回ります。Web 標準設計の書籍も参考になります。