先生。実際にどんな順番で並べてWebページを作るのかがまだよく分かりません…。
そうそう！いきなり細かいルールを覚えるより、まず全体の地図が欲しいです！
了解！家を建てる時も、いきなり壁紙を選んだりしないで、まずは「基礎」「柱」「屋根」っていう骨組みから作るよね。HTMLもそれと全く同じなんだ。
最初に、HTML文書の「設計図」とも言える全体像を見てみよう！
まずは全体像をつかもう！
HTMLの基本構造は、この4つのパーツを上から順番に並べただけなんだ。
| 要素 | 説明 |
|---|---|
| 1. DOCTYPE宣言 | 「これはHTML5のルールで書かれたページです！」というブラウザーへの宣言。 |
| 2. html要素 | すべての要素を包む、一番大きな箱。 |
| 3. head要素 | ページの設定情報が入る部分。タイトルや文字コードなど、ユーザーには直接見えないけど大切な情報。 |
| 4. body要素 | 実際に画面に表示される内容のすべて。見出し、文章、画像などは全部ここに入れる。 |
まずは「DOCTYPE → html → head → body」この順番だけ覚えればOK！これがすべてのWebページの基本の型だよ。
実際のコードを見てみよう
理屈はわかったけど、実際のコードだとどうなるんですか？
いいね、それじゃあ完成形を見てみよう。この形はどんなページでも使えるから、最初はこれをコピーして中身を書き換えるのがおすすめだよ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の最初のWebページ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>これは私が作った最初のHTMLページです。</p>
<p>HTMLを学ぶのって楽しいですね！</p>
</body>
</html>前回作成したファイルの確認
まずは、前回作成したhtml-practiceフォルダーのindex.htmlファイルをブラウザで確認してみましょう。
前回作成したHTMLファイルをブラウザーで表示すると、次のことが確認できます：
<title>要素の内容がブラウザーのタブに反映され、「私の最初のWebページ」と表示される- ページの内容として「Hello, World!」の見出しと説明文が表示される
- <title>タグで設定した内容がブラウザーのタブに表示されます
- <body>タグ内に記述した内容がページに表示されます
なるほど！このテンプレートがあれば、とりあえず始められますね！
各パーツの役割を詳しく見てみよう
DOCTYPE宣言
DOCTYPE宣言は、「このファイルはHTML5のルールに従って書かれています」とブラウザーに伝えるための宣言文です。必ずHTMLファイルの先頭に書きます。
<!DOCTYPE html>DOCTYPE宣言を忘れると、ブラウザーが「古いHTMLのルール」で表示してしまい、レイアウトが崩れることがあります。必ず1行目に書きましょう！
html要素 - すべてを包む大きな箱
<html>要素は、HTMLドキュメント全体を包む最も外側の要素です。lang="ja"属性で文書の言語を指定することで、ブラウザーや読み上げソフトが正しく日本語として認識できます。
<html lang="ja">
<!-- この中にすべてが入る -->
</html>head要素 - 見えない準備エリア
head要素って、ユーザーには見えないのに何で重要なんですか？
head要素は「舞台裏」の準備と同じなんだ。ユーザーには見えないけど、HTML文書を正しく表示するために必要な情報がたくさん詰まっているんだよ。
head要素は、Webページの「設定情報」を記述する部分です。ユーザーの画面には直接表示されませんが、ブラウザーやサーチエンジンにとって重要な情報を含みます。
head要素に含まれる主な設定
| 設定項目 | タグ | 役割 |
|---|---|---|
| 文字コード | <meta charset="UTF-8"> | 日本語の文字化けを防ぐ |
| スマホ対応 | <meta name="viewport" content="..."> | スマートフォンでの表示を最適化 |
| ページタイトル | <title>タイトル</title> | ブラウザーのタブに表示される |
<head>
<meta charset="UTF-8"> <!-- 文字コード設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- スマホ対応 -->
<title>私の最初のWebページ</title> <!-- タイトル -->
</head>body要素 - メインステージ
body要素は、ユーザーが実際に見るすべての内容を配置する部分です。見出し、文章、画像、動画、ボタンなど、Webページの中身となるコンテンツはすべてここに記述します。
<body>
<h1>Hello, World!</h1>
<p>これは私が作った最初のHTMLページです。</p>
<p>HTMLを学ぶのって楽しいですね！</p>
</body>body要素には何を書いてもいいんですか？
基本的には何でもOK！でも、きちんとしたHTMLタグを使って書くことが大切だよ。例えば、見出しは<h1>、段落は<p>のように、意味に合ったタグを選ぶんだ。
理解度チェッククイズ
それでは、今日学んだHTML文書の構造について、クイズで理解度をチェックしてみよう。基本構造をしっかり覚えているかな？
HTML文書構造ミニクイズ
まとめ
今日はHTML文書の構造について学んだけど、思ったより整理されてるんですね！
そうだね！DOCTYPE、html、head、bodyの順番で書けばいいだけだから、覚えやすいよ。
その通り！最初は複雑に見えるかもしれないけど、実はとてもシンプルな構造なんだ。この基本さえ押さえておけば、どんなWebページでも作ることができるよ。
次回は、今度は<body>の中に入れる具体的なタグについて学んでいこう！
- 基本構造の順番 Webページは「DOCTYPE → html → head → body」の順番で作る
- 役割分担
headには設定情報、bodyには表示する内容を書く - 実践のコツ 迷ったら、まずは「完成形」をコピーして書き換えてみよう
- 重要な設定 文字コード、viewport、titleの3つは必須
次回は、<body>要素の中で使う具体的なHTMLタグについて学習します。見出し、段落、リストなど、実際にコンテンツを作成するためのタグの使い方をマスターしましょう！