セマンティック（Semantic）HTMLとは
「セマンティック（Semantic）」とは、日本語で「意味の、意味論の」という意味で、「ブラウザやコンピュータに対して、その場所がどんな役割（意味）を持っているかを正しく伝えるための書き方」のことを指します。
見た目と意味の違い
非セマンティック（意味のない書き方）
<div style="font-size: 32px; font-weight: bold;">Webデザイン演習</div>→単なる文字の集まりとしか伝わりません
セマンティック（意味のある書き方）
<h1>Webデザイン演習</h1>→「これがこのページで一番重要な見出しである」という意味が伝わります
なぜ意味が重要か？
検索エンジンに強くなる（SEO）：Googleなどの検索エンジンは、サイトの構造を読み取って内容を理解します。<main>や<h1>を正しく使うことで、「どこに重要な情報があるか」を正確に伝えられ、検索結果に正しく反映されやすくなります。
アクセシビリティ ：例えば「スクリーンリーダー（音声読み上げソフト）」は、HTMLのタグを頼りに読み上げます。セマンティックなマークアップをすることで「ここがメニューだ」「ここが本文だ」と理解しやすくなります。
AIやプログラムが理解しやすい：生成AIにサイトの要約をさせたり、コードを修正させたりする際に、文脈を正しく読み取り、より精度の高い回答を出しやすくなります。
ソースコードが読みやすくなる：人間がコードを読み取るときにも、どこに何が書いてあるのか理解しやすく、可読性が高まります。
主なセマンティックタグ
1. 全体構造を定義するタグ
<header>- 導入的なコンテンツやナビゲーションのグループを表します。
<nav>- 現在のページ内、または他のページへのナビゲーションリンクを提供します。
<main>- 文書の主要なコンテンツ（主役）を表します。1つの文書に1つだけ配置するのが原則です。
<footer>- 直近のセクションのフッター（著作権情報や関連リンク）を表します。
2. コンテンツの区切り（セクション）を定義するタグ
<article>- それ単体で切り離して、他のサイトなどで再利用可能な「完結した内容（ブログ記事、ニュース等）」を表します。
<section>- 文書内の一般的な「章（セクション）」を表します。通常は中に見出し（h2-h6）を含みます。
<aside>- メインコンテンツとは間接的な関係しか持たない「補足情報（サイドバー、広告等）」を表します。
3. 見出しと情報のまとまり
<h1>–<h6>- 6段階の見出し。情報の階層構造（トピックの重要度）を示します。
<figure>と<figcaption>- 図表や写真と、そのキャプション（説明文）をひとまとめにします。
セマンティックHTMLを使った記述例
基本的に全てのページは、<header> <main>などの、セマンティックHTMLを使って、構造を定義した上で、本文やリストなど、個々のHTMLタグを使用します。
下記のコードは一例です。
【参考】