HTMLの基礎
この章で得られるスキル：
- ✅ HTMLの役割を説明できる
- ✅ HTMLの基本構造（
<!DOCTYPE html>,<html>,<head>,<body>）を理解している - ✅ 見出し（
<h1>〜<h6>）を使い分けられる - ✅ 段落（
<p>）を作成できる - ✅ ブロック要素とインライン要素の違いを理解している
- ✅ リスト（
<ul>,<ol>,<li>）を作成できる - ✅ リンク（
<a>）を作成できる - ✅ 画像（
<img>）を表示できる - ✅ セマンティックHTML（
<header>,<nav>,<main>,<footer>）を使える
Step 0: まず体験してみよう
説明の前に、まず HTMLがないと何が困るのか を体験しよう。
シナリオ：ブログ記事を書く
以下は、プレーンテキストで書いたブログ記事である：
私のおすすめレストラン
今日は、私のおすすめレストランを紹介します。
イタリアンレストラン「ラ・ベッラ」
住所：東京都渋谷区〇〇
おすすめ料理：マルゲリータピザ
和食レストラン「花月」
住所：東京都新宿区〇〇
おすすめ料理：天ぷら定食
詳しくはこちら：https://example.com
このテキストには、以下のような問題がある：
- どれが見出しで、どれが本文かわからない
- 「私のおすすめレストラン」が見出しなのか、本文なのか区別できない
- リストが読みにくい
- レストラン名や住所が羅列されているが、構造化されていない
- リンクがクリックできない
- URLが書いてあるだけで、クリックして飛べない
では、これを HTML で書くと、どうなるだろうか？
- HTMLコードを見て、プレーンテキストと何が違うかを確認しよう
- 右側のプレビューで、見出しが大きく表示され、リストが箇条書きになっていることを確認しよう
- なぜHTMLでは構造が明確になるのか考えてみよう（ヒント：タグが「意味」を与えている）
<h1>を<h2>に変更して、見出しの階層構造を理解しよう
HTMLを使うことで、文章の 構造 が明確になり、読みやすく、使いやすくなる。
Step 1: HTMLとは何か
HTML（エイチティーエムエル） とは、 HyperText Markup Language の略で、Web ページの 構造 を記述するための言語である。
HTMLは「文章の構造」を表現するための技術である。
- 「これは見出しである」
- 「これは段落である」
- 「これはリストである」
のように、文章の各部分の 意味 を明確にする。
見た目（色、大きさ、配置など）は CSS で制御する。HTMLとCSSは役割が異なる。
HTMLの基本的な仕組み
HTMLでは、 タグ を使って文章を囲むことで、その部分の意味を示す。
例：段落を作る
<p>これは段落です。</p>
<p>：開始タグ（ここから段落が始まる）</p>：終了タグ（ここで段落が終わる）
このように、 開始タグと終了タグで囲んだ部分 が「段落」であることをブラウザに伝える。
<p>タグを追加して、4つ目の段落を作成してみよう<p>タグを削除して、すべての文章を直接書いてみよう- タグがあるときとないときで、表示がどう変わるかを比較しよう
- タグが「段落の区切り」という 意味 を与えていることを理解しよう
Step 2: HTMLの基本構造
すべてのHTMLファイルは、以下のような基本構造を持つ：
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<p>ここに本文を書く</p>
</body>
</html>
各部分の役割
| 部分 | 役割 |
|---|---|
<!DOCTYPE html> | これがHTML5の文書であることを宣言 |
<html> | HTML文書全体を囲む |
<head> | ページの情報（タイトル、文字コードなど）を記述 |
<title> | ブラウザのタブに表示されるタイトル |
<body> | 実際にページに表示される内容を記述 |
HTMLファイルを作成するときは、必ずこの基本構造から始める。
<body>の中に、見出しや段落などの内容を書いていく。
<title>に別の文字列を入れて、ブラウザのタブに表示されることを確認しよう（CodePenでは確認できないが、実際のHTMLファイルで試してみよう）<body>の中にさらに段落を追加してみよう<head>と<body>の役割の違いを理解しよう（head = 情報、body = 表示内容）
Step 3: 見出しと段落
見出し：<h1>〜<h6>
見出しは、<h1>から<h6>まで6段階ある：
<h1>これは最も重要な見出し</h1>
<h2>これは2番目に重要な見出し</h2>
<h3>これは3番目に重要な見出し</h3>
<h4>これは4番目に重要な見出し</h4>
<h5>これは5番目に重要な見出し</h5>
<h6>これは最も重要度が低い見出し</h6>
<h1>：ページ全体で最も重要な見出し（通常、ページに1つだけ）<h2>：大きなセクションの見出し<h3>：<h2>の中の小見出し<h4>〜<h6>：さらに細かい見出し
見出しは 意味の重要度 を表すものであり、 見た目の大きさ を決めるものではない。
「文字を大きくしたいから<h1>を使う」のは誤り。見た目はCSSで制御する。
<h2>を<h1>に変更して、見出しが大きくなることを確認しよう- なぜ見出しが大きくなるのか考えてみよう（ブラウザがh1をh2より重要だと解釈し、デフォルトで大きく表示するため）
<h3>を<h4>に変更して、階層構造を意識してみよう- 見出しは「大きさ」ではなく「階層と重要度」を表すことを理解しよう
段落：<p>
段落は、<p>タグで囲む：
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
<p>タグを削除して、3つの文章を直接書いてみよう- タグがないと改行されず、すべてが1行になることを確認しよう
<p>タグが「段落の区切り」という意味を与えていることを理解しよう- なぜHTMLでは改行やスペースが無視されるのか考えてみよう（ブラウザはタグの指示に従って表示するため）
Step 4: ブロック要素とインライン要素
HTMLの要素は、大きく ブロック要素 と インライン要素 の2つに分類される。
ブロック要素
ブロック要素 は、要素が 改行されて 表示される要素である。 前後に自動的に改行が入り、1つの「ブロック」として表示される。
主なブロック要素：
<div>,<p>,<h1>〜<h6>,<ul>,<ol>,<li>,<section>,<article>,<header>,<footer>,<nav>,<main>
例：
<div>これはブロック要素です</div>
<div>これも改行されて表示されます</div>
インライン要素
インライン要素 は、要素が 改行されずに 表示される要素である。 文章の中で、一部分を囲むときに使う。
主なインライン要素：
<span>,<a>,<strong>,<em>,<img>
例：
<span>これはインライン要素です</span>
<span>改行されずに横に並びます</span>
ブロック要素とインライン要素の違い
<div>を<span>に変更して、表示がどう変わるか確認しよう- なぜ表示が変わるのか考えてみよう（divは改行される、spanは改行されない）
<p>の中に<span>を入れて、インライン要素がブロック要素の中に含まれることを理解しよう- この違いが、レイアウトやCSSの適用にどう影響するか考えてみよう
- ブロック要素：セクション、段落、見出しなど、独立した「ブロック」を作るときに使う
- インライン要素：文章の中の一部分（単語や短いフレーズ）を装飾したり、リンクにしたりするときに使う
この違いを理解することで、HTMLの構造をより適切に設計できる。 また、CSSでレイアウトを組むときにも、この違いが重要になる。
<strong>タグを使って、文章の一部を強調してみよう<div>の中に複数の<p>を入れて、グループ化を試してみよう- ブロック要素の中にインライン要素を入れることはできるが、その逆（インライン要素の中にブロック要素）は通常できないことを理解しよう
- 実際のWebページで、どのようにブロック要素とインライン要素が使われているか観察してみよう
Step 5: リスト
箇条書きリスト（ul）
箇条書きリストは、<ul>（Unordered List）と<li>（List Item）を使う：
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
表示結果：
- りんご
- バナナ
- オレンジ
番号付きリスト（ol）
番号付きリストは、<ol>（Ordered List）と<li>を使う：
<ol>
<li>家を出る</li>
<li>駅まで歩く</li>
<li>電車に乗る</li>
</ol>
表示結果：
- 家を出る
- 駅まで歩く
- 電車に乗る
- 順序が重要な場合は
<ol>を使う（例：手順、ランキング） - 順序が重要でない場合は
<ul>を使う（例：買い物リスト、箇条書き）
<ul>を<ol>に変更して、箇条書きが番号付きになることを確認しよう- なぜulとolを使い分けるのか考えてみよう（順序が重要かどうかで使い分ける）
<li>を追加して、リストに項目を増やしてみよう- リストをネストさせて、階層構造を作ってみよう（例：
<ul>の中の<li>に、さらに<ul>を入れる）
- ネストされたリストの構造を確認しよう
- インデント（字下げ）が階層を表していることを理解しよう
- ネストの深さを増やして、3階層、4階層のリストを作ってみよう
- なぜリストをネストするのか考えてみよう（情報を階層構造で整理するため）
Step 6: リンク
リンクは、<a>タグ（anchor）を使う：
<a href="https://www.example.com">こちらをクリック</a>
href：リンク先のURL- タグで囲んだ部分が、クリックできるリンクテキストになる
新しいタブで開く
<a href="https://www.example.com" target="_blank">新しいタブで開く</a>
target="_blank"：リンクを新しいタブで開く
hrefの値を変更して、別のURLにリンクしてみようtarget="_blank"を追加・削除して、リンクの開き方が変わることを確認しようhref="#top"のように#で始まるリンクが、ページ内リンク（アンカーリンク）であることを理解しよう- なぜリンクテキストは「こちら」ではなく具体的な説明にすべきか考えてみよう（スクリーンリーダーやSEOのため）
Step 7: 画像
画像は、<img>タグを使う：
<img src="image.jpg" alt="画像の説明">
src：画像ファイルのパスalt：画像が表示できない場合の代替テキスト
alt属性は、以下の理由で重要である：
- アクセシビリティ：視覚障害者がスクリーンリーダーで内容を理解できる
- SEO：検索エンジンが画像の内容を理解できる
- エラー時の表示：画像が読み込めない場合に説明が表示される
必ず適切な説明を書くこと。
画像のサイズ指定
<img src="image.jpg" alt="画像の説明" width="300" height="200">
width：幅（ピクセル）height：高さ（ピクセル）
widthとheightの値を変更して、画像のサイズが変わることを確認しようaltの内容を変更して、画像の説明を具体的に書いてみよう- なぜaltが重要なのか考えてみよう（画像が読み込めないときや、スクリーンリーダーで読み上げるため）
- 画像を
<a>タグで囲んで、クリックできるようにしてみよう
Step 8: セマンティックHTML
セマンティックHTML とは、タグの名前からその役割がわかるHTMLのことである。
主要なセマンティックタグ
| タグ | 役割 |
|---|---|
<header> | ページやセクションのヘッダー部分 |
<nav> | ナビゲーションメニュー |
<main> | ページのメインコンテンツ |
<article> | 独立したコンテンツ（ブログ記事など） |
<section> | セクション（章、タブなど） |
<aside> | サイドバーや補足情報 |
<footer> | ページやセクションのフッター部分 |
使用例
<!DOCTYPE html>
<html>
<head>
<title>私のブログ</title>
</head>
<body>
<header>
<h1>私のブログ</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">私について</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>今日の出来事</h2>
<p>今日は公園に行きました。</p>
</article>
</main>
<footer>
<p>© 2025 私のブログ</p>
</footer>
</body>
</html>
セマンティックHTMLを使うことで：
- 検索エンジンが内容を理解しやすくなる（SEO向上）
- スクリーンリーダーが構造を正しく読み上げる（アクセシビリティ向上）
- コードが読みやすくなる（保守性向上）
実務では、<div>だけで構成するのではなく、適切なセマンティックタグを使うことが重要である。
<header>を<div>に変更して、見た目は変わらないが意味が失われることを確認しよう- なぜセマンティックタグを使うべきか考えてみよう（検索エンジンやスクリーンリーダーが構造を理解できるため）
<section>にid属性を追加して、ページ内リンク（<a href="#about">）が機能することを確認しよう- 実際のWebサイトで、どのようにセマンティックタグが使われているか、開発者ツールで確認してみよう
演習
この章で学んだ内容を確認するため、以下の演習問題に取り組んでください。
演習問題は、docs/src/questions/frontend/html_basics/フォルダにあります：
- k1.mdx: HTMLの役割を説明できる
- k2.mdx: HTMLの基本構造を理解している
- w1.mdx: 見出しと段落を作成できる
- w2.mdx: ブロック要素とインライン要素を使い分けられる
- w3.mdx: リストを作成できる
- w4.mdx: リンクを作成できる
- w5.mdx: 画像を表示できる
- w6.mdx: セマンティックHTMLを使える
コラム：「大文字にしたい」は見た目の話、h1タグは構造の話
初学者によくある誤解がある：
- ❌ 「文字を大きくしたいから
<h1>を使う」 - ❌ 「太字にしたいから
<h2>を使う」
これは 誤り である。HTMLは 文章の構造 をマークアップするための技術である。
<h1>タグの本当の役割
<h1>は「これが最も重要な見出しである」という 意味 を表す。
見た目（大きさ、太さ、色など）は CSS で制御する。
具体例：「利用規約」という文字を大きくしたい
❌ 誤り：
<h1>利用規約</h1>
→ ページの最重要見出しではないのに<h1>を使っている
✅ 正解：
<p class="large-text">利用規約</p>
.large-text {
font-size: 24px;
font-weight: bold;
}
なぜHTMLとCSSを分離するのか
HTMLは意味、CSSは見た目 を分離することが重要である。
この原則を守ることで：
- 検索エンジンが正しく文章を理解できる
- Googleは
<h1>を「最重要な見出し」として認識する
- Googleは
- スクリーンリーダーが正しく読み上げる
- 視覚障害者が内容を理解しやすくなる
- 保守性が向上する
- 見た目を変えたい場合、CSSだけを変更すれば良い
HTMLは構造、CSSは見た目
タグを選ぶときは、「どう見せたいか」ではなく、「どんな意味を持つか」を考える。
まとめ
この章では、 HTMLの基礎 について学んだ。
🎯 達成できたこと
- ✅ HTMLの役割（文章の構造を記述する）を理解した
- ✅ HTMLの基本構造（DOCTYPE, html, head, body）を理解した
- ✅ 見出し（h1〜h6）と段落（p）を使えるようになった
- ✅ ブロック要素とインライン要素の違いを理解した
- ✅ リスト（ul, ol, li）を使えるようになった
- ✅ リンク（a）と画像（img）を使えるようになった
- ✅ セマンティックHTML（header, nav, main, footer）を使えるようになった
📚 学んだ内容
- HTMLは 文章の構造 を記述するための言語
- タグは 開始タグと終了タグ で囲む
- 見出しは 意味の重要度 を表す（見た目ではない）
- ブロック要素は 改行される、インライン要素は 改行されない
- セマンティックHTMLを使うと SEOやアクセシビリティが向上 する
- HTMLは構造、CSSは見た目 を分離することが重要
🚀 次のステップ
次の章では、 CSSの基礎 について学ぶ。 HTMLで作った構造に、CSSでスタイル（色、フォント、レイアウトなど）を適用していく。
💡 よくある質問
Q1: <div>と<span>はどう使い分けるのか？
A: <div>と<span>は、どちらも 特別な意味を持たない汎用的なタグ である。
<div>：ブロック要素（改行される）。セクションをグループ化するときに使う<span>：インライン要素（改行されない）。テキストの一部をグループ化するときに使う
ただし、可能な限り セマンティックなタグ（header, nav, articleなど）を優先 して使うべきである。
Q2: <br>タグと<p>タグの違いは？
A:
<br>：改行（Line Break）を挿入する<p>：段落（Paragraph）を作る
<br>は単に改行するだけだが、<p>は「ここが1つの段落である」という 意味 を表す。
基本的には、段落を分けるときは<p>を使い、<br>は詩や住所など、特別な理由がある場合のみ使う。
Q3: HTMLファイルの文字コードは何にすべきか？
A: UTF-8 にすべきである。
<head>の中に以下を記述する：
<meta charset="UTF-8">
UTF-8は、日本語を含むほぼすべての言語を扱える文字コードである。
Q4: <img>タグに終了タグがないのはなぜか？
A: <img>は 空要素（Void Element） と呼ばれ、内容を持たないため終了タグが不要である。
他の空要素の例：
<br>：改行<hr>：水平線<input>：フォーム入力欄
Q5: セマンティックHTMLは必須か？
A: 必須ではないが、 強く推奨される。
セマンティックHTMLを使わなくてもページは表示されるが、以下のデメリットがある：
- 検索エンジンが内容を理解しにくくなる（SEOが低下）
- スクリーンリーダーが構造を正しく読み上げられない（アクセシビリティが低下）
- コードが読みにくくなる（保守性が低下）
特に理由がない限り、セマンティックHTMLを使うべきである。
Q6: <b>と<strong>、<i>と<em>の違いは？
A:
<b>：単に太字にする（見た目だけ）<strong>：重要性を示す（意味を持つ）<i>：単に斜体にする（見た目だけ）<em>：強調を示す（意味を持つ）
セマンティックHTML の観点から、<strong>と<em>を使うべきである。
ただし、CSSで見た目を制御できるため、これらのタグもあまり使わず、CSSでfont-weightやfont-styleを指定する方が良い。
Q7: HTMLのコメントはどう書くのか？
A: <!--と-->で囲む：
<!-- これはコメントです -->
<p>これは表示されます</p>
<!--
複数行の
コメントも書けます
-->
コメントはブラウザに表示されないが、ソースコードを見ると見える。機密情報は書かないこと。
Q8: ブロック要素とインライン要素は入れ子にできるのか？
A: ブロック要素の中にインライン要素を入れることはできる が、その逆（インライン要素の中にブロック要素）は通常できない。
OK：
<div>
<span>インライン要素</span>
</div>
NG：
<span>
<div>ブロック要素</div>
</span>
ただし、HTML5では一部例外があり、<a>タグの中にブロック要素を入れることができる。