セマンティックとは
Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想
レイアウト例
デザインのイメージ
セマンティックHTMLのイメージ
セマンティックでないコードとは？
この例では、 div 要素が多く使われており、各部分（ヘッダー、コンテンツ、フッター）にボックスとネストされたボックスが含まれています。
見た目やレイアウトは簡素ですが、 div の使い過ぎにより複雑さを増しています。
<body>
<div class="container">
<div class="header">
<div class="box">
<div class="nested-box">Header</div>
</div>
</div>
<div class="content">
<div class="box">
<div class="nested-box">Content Box 1</div>
<div class="nested-box">Content Box 2</div>
<div class="nested-box">
<div class="nested-box">Nested Content Box 1</div>
<div class="nested-box">Nested Content Box 2</div>
</div>
<div class="nested-box">Content Box 3</div>
</div>
</div>
<div class="footer">
<div class="box">
<div class="nested-box">Footer</div>
</div>
</div>
</div>
</body>
セマンティック要素で解決してみよう！！
下記は、セマンティック要素の代表として一例をピックアップしました。
<main>
<main>は HTML の要素で、文書の<body>の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。
<main> 要素の内容は、文書で固有のものにしてください。
この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきです。
(もちろん、主な内容が検索フォームでない限り)
<article>
<article>は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表します。
例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
それぞれの <article> は、子要素として見出し（<h1> - <h6> 要素）を含むなどの方法で識別できるようにするべきです。
<aside>
<aside>は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。
サイドバーやコールアウトボックスなどを表現するためによく使われます。
文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために <aside> 要素を使用しないでください。
<section>
<section>は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。
そのセクションを表現するより意味的に具体的な要素がない場合に使用します。
少数の例外を除いて、セクションには見出しを置いてください。
前述のように、 <section> は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。
例えば、ナビゲーションメニューは <nav> 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 <section> の中に入れることができます。
<header>
<header>は HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。
見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。
<header> 要素は、区分コンテンツの中に含まれていない限り、ウェブサイト全体の banner ランドマークロールと同じ意味を持ちます。
その場合、<header> 要素はランドマークではありません。
vitestでgetByRoleで取得するときも注意！！
<footer>
<footer>は HTML の要素で、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。
フッターには通常、そのセクションの著者に関する情報、関連文書へのリンク、著作権情報等を含めます。
<nav>
<nav>は HTML の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
すべてのリンクを <nav> 要素に入れる必要はありません。
<nav> はナビゲーションリンクの主要なブロックのみに用います。
<footer> にもよくリンクのリストが設置されますが、<nav> 要素の中に入れる必要はありません。
<figure>
<figure>は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で<figcaption>要素を使用して表されるキャプションを付けることができます。
図、すなわちキャプションとその中身は一単位として参照されます。
<figcaption>
<figcaption>は HTML の要素で、親の<figure>要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。
<body>
<div class="container">
+ <header>
<div class="box">
<div class="nested-box">Header</div>
</div>
+ </header>
+ <main>
+ <section class="box">
<div class="nested-box">Content Box 1</div>
<div class="nested-box">Content Box 2</div>
<div class="nested-box">
<div class="nested-box">Nested Content Box 1</div>
<div class="nested-box">Nested Content Box 2</div>
</div>
<div class="nested-box">Content Box 3</div>
+ </section>
+ </main>
+ <footer>
<div class="box">
<div class="nested-box">Footer</div>
</div>
+ </footer>
</div>
</body>
参考