目次
Webサイトは、見た目のデザインだけで作られているわけではありません。その裏側には HTML（HyperText Markup Language） という言語があり、Webページの構造を定義しています。今回は、Webページの最も基本となる HTMLの骨格（基本構造） について解説します。
Webページは「骨格」でできている
Webページは、人間の体と同じように「骨格」があります。
この骨格が HTMLの基本構造 です。
基本的な構造は次のようになっています。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
この5つの要素が、ほぼすべてのWebページの土台になります。
① <!DOCTYPE html> — HTMLの宣言
<!DOCTYPE html>
これは「このページはHTMLで書かれています」という宣言です。
現在のWebでは HTML5 が標準になっているため、
この一行を書くだけで「最新のHTML」としてブラウザが認識します。
② <html> — Webページ全体
<html>
</html>
htmlタグは Webページ全体を包むルート要素 です。
このタグの中に、Webページのすべての内容が入ります。
つまり
HTMLページの箱
のような役割を持っています。
③ <head> — ページの裏側の情報
<head>
</head>
headタグは、ユーザーには見えない情報 を入れる場所です。
例えば次のような情報を記述します。
- ページタイトル
- 文字コード（UTF-8）
- CSSの読み込み
- SEO情報
- JavaScript
例
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
</head>
ブラウザには表示されませんが、
Webページを正しく表示するためにとても重要な部分です。
④ <body> — 実際に表示される内容
<body>
</body>
bodyタグの中には、ユーザーが実際に見る内容を記述します。
例えば
- 見出し
- 文章
- 画像
- ボタン
- 動画
などです。
例
<body>
<h1>こんにちは</h1>
<p>これは私のホームページです。</p>
</body>
この部分が、ブラウザ画面に表示されます。
HTMLの全体イメージ
整理すると、Webページは次のような構造になっています。
<!DOCTYPE html>
↓
<html>
↓
<head> ← 裏側の情報
</head> <body> ← 表示される内容
</body></html>
つまり
head = 設定や情報
body = 実際のコンテンツ
という役割になっています。
まとめ
Webページの基本構造はとてもシンプルです。
| 要素 | 役割 |
|---|---|
<!DOCTYPE html> | HTML5の宣言 |
<html> | ページ全体 |
<head> | 裏側の情報 |
<body> | 表示される内容 |
この骨格を理解すると、HTMLの学習がわかりやすくなります。
