名前のない div を、構造に意味を与えるタグに置き換える。
このレッスンを Kodokon で開くすべてを div で組んだページは動作しますが、何も 語りません。スクリーンリーダーにも、検索エンジンにも、半年後にあなたのコードを引き継ぐ同僚にもです。セマンティックなタグは各領域の役割を説明します。header、nav、main、article、section、footer です。
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header はページのヘッダー(ロゴ、ナビゲーション)をまとめ、footer は締めくくりの情報(法的表記、補助的なリンク)をまとめます。main はメインコンテンツを収め、ページ内で 唯一 でなければなりません。nav はナビゲーション領域を示します。メインナビゲーション、パンくずリスト、目次などです。
最も厄介な区別は、article と section です。目安のルール: そのブロックが 文脈の外でも 意味を持つ(ブログ記事、コメント、商品カード)なら、それは article です。あるコンテンツの中で、独自の見出しを持つテーマ的なまとまりなら、それは section です。
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>思考練習: EC の商品ページで、顧客レビューの一覧をどうマークアップしますか? 各レビューには投稿者、日付、そしてそれ自体で成立する内容があります。したがって各レビューは article であり、それらをまとめる見出し付きの「顧客レビュー」ブロックは section です。