HTMLとは何か

この記事のゴール

• HTMLを「文章の意味付け（構造化）」として説明できる
• よく使うタグ（h1/p/a/img/ul/li/section）を使える
• WordPress投稿が最終的にHTMLになるイメージが持てる

1. まず結論（30秒）

HTMLは、Webページの内容に意味（構造）を与える言語です。
「見出し」「本文」「リスト」などを正しく分けるほど、読みやすく・SEOにも強くなります。

2. よく使うタグ（最優先）

• h1〜h6: 見出し（h1が一番大きい）
• p: 段落（文章）
• a: リンク
• img: 画像
• ul / li: 箇条書き
• section: 章・まとまり

3. “いいHTML”の考え方

• 見た目より先に意味を優先する
• 「divだらけ」より、見出し/段落/リストを正しく使う
• h1は基本1つ（ページの主題）

4. 実際にどう役立つ？

• LP制作：見出し構造が読みやすさ・SEOに直結
• WordPress：ブロックエディタで書いても、最終的にHTMLになって表示される
• 表示崩れの原因が「HTMLの構造」なこともある（タグ閉じ忘れ等）

5. よくある誤解

• 誤解: divをいっぱい使えばOK
  正しくは: まずは「意味のあるタグ」で構造化すると後が楽

6. ミニ課題（30分）

「求人LPの骨組み」をHTMLだけで作ります（CSSなし）。

• h1（ページの主題）を1つ決める
• sectionで「待遇」「給与例」「応募方法」「FAQ」を分ける
• FAQはul/liで箇条書きにする
• CTAはaタグでリンクを作る（仮でOK）

ブログに載せるもの（アウトプット）

• • HTMLのスクショ
  • 「h1は何にしたか」1行

□作ったページのブラウザ表示のスクショ

□作ったページのHTMLのスクショ

7. 理解チェック

1. HTMLは何をする言語？
2. h1は基本いくつ？
3. aタグは何？

まとめ

• 今日の結論: HTMLは内容を「意味付けして構造化」する
• 次にやること: CSSで見た目とスマホ対応へ