【HTML 1-1】タグの基本｜見出し・段落・リンク・画像で“最初の1ページ”を作る（初心者向け）
toshi
ToshiLab
【HTML 1-2】ページの構造｜header・main・footerで“読みやすい土台”を作る（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
前回は、見出し・段落・リンク・画像を使って
最初の1ページを作りました。
今回は、その中身を少し整理していきます。
同じ内容でも、
「どこが上の案内で、どこが本文で、どこが下の情報か」
が分かるようになると、ページが読みやすくなります。
つまり今日は、
**HTMLの“置き場所”を覚える回**です。
- 「ページは“3つのまとまり”で考えると分かりやすいです」
-
最初は、この3つで考えれば大丈夫です。
・header：上の案内やタイトル
・main：そのページの本文
・footer：下の補足や著作権表示まずはこの3つに分けて書ければOKです。
細かいタグは、あとから少しずつ増やせば十分です。
Q
目次
ここまでできればOK
今回のゴール
- header / main / footer の役割が分かる
- 前回のHTMLを“まとまり”で整理できる
- どこが本文かを意識して書ける
- CSSに進む前の土台ができる
難しく考えない
まず役割だけ覚える
| タグ | 役割 | 何を書けばいい？ |
|---|---|---|
| header | 上の案内 | ページタイトル、 説明、ナビなど |
| main | 本文 | そのページで一番 伝えたい内容 |
| footer | 下の補足 | 著作権表記、 補足、フッター情報 |
最初は「上・真ん中・下」に分ける感覚で十分です。
コピペOK
まずは完成形を見る
まずは、下のコードをそのまま index.html に貼って保存してください。
前回より少し整理された形になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTMLのページ構造</title>
</head>
<body>
<header>
<h1>HTMLのページ構造を練習する</h1>
<p>header・main・footer を使って、ページを整理します。</p>
</header>
<main>
<h2>このページでやること</h2>
<p>HTMLの中身を、役割ごとに分けて書く練習をします。</p>
<h2>リンクの例</h2>
<p>
参考：
<a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener">
MDN（日本語）
</a>
</p>
<h2>画像の例</h2>
<p>画像は本文の中に置くことが多いです。</p>
<img src="images/sample.jpg" alt="サンプル画像" width="480" />
</main>
<footer>
<p>© ToshiLab</p>
</footer>
</body>
</html>前回との差分
どこがどう変わった？
| 変更したこと | 意味 |
|---|---|
| h1と説明文を header に入れた | ページ上部の案内だと分かりやすい |
| 本文を main に入れた | どこが主役か分かりやすい |
| ©表記を footer に入れた | 下の補足情報として整理できる |
使い方
main は“そのページの主役”として使う
main は、このページで一番伝えたい内容を書く場所です。
今回なら、
「HTMLのページ構造を練習する」がテーマなので、
その説明や見本コード、リンク、画像が main に入っています。
使い方
header と footer は“補助のまとまり”
header と footer は、本文そのものというより
“ページを支える情報”を置く場所です。
- header：ページのタイトル、簡単な説明
- footer：著作権、補足、下の情報
- 本文は main に寄せる
ここだけ確認
よくあるつまずき
- 「header や footer を使うと何が変わるの？」
-
見た目は、いまの段階では大きく変わらないことがあります。
でも、HTMLの“意味”が整理されます。この整理があると、
・CSSで見た目を整えやすい
・自分でも後から読み返しやすい
・ページの役割が分かりやすいというメリットがあります。
Q
- 「main の中に全部入れてもダメ？」
-
最初の練習では大きな問題にはなりません。
ただ、ページ上部の案内や下の補足まで main に入れると、
あとで整理しづらくなります。最初から
・上＝header
・本文＝main
・下＝footer
で分けておくとラクです。
Q
最低限
今回のコードで意識したいこと
- 見出し（h1 / h2）は内容の区切りになる
- 本文は main にまとめる
- header / footer は補助情報として使う
- “意味ごとに分ける”感覚を持つ
できた判定
今日のゴール確認
ここまでできたらOKです。
- header / main / footer の役割が分かった
- 前回のHTMLを整理して書けた
- 本文の主役を main に置く感覚が持てた
- CSSに進む前の土台ができた
次に読む
HTML 1-3. へ
次は「フォームの入口」です。
input や textarea を使って、“入力できるページ”の基本を触っていきます。
PR：最初の1冊（必要な方だけ）
PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
