はじめに
Webページを作成する際に不可欠なHTMLの基本タグであるhtml、head、bodyについて解説します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
これらのタグは、Webページの構造を決定し、適切に使用することで、ページの見た目や動作を正しく制御できます。
書こうと思ったきっかけ
最近、HTMLを学び始めた方から「HTMLの基本構造について詳しく知りたい」という質問を受けることが増えました。
特にheadとbodyの役割や違いについて混乱することが多いようです。（私も学び始めは混乱していました...）
そこで、HTMLの基本的な構造を整理し、分かりやすく説明する記事を書こうと思いました。
html タグ
html タグは、全てのHTMLコードを包む格納タグです。HTMLドキュメントは、このhtmlタグで閉じなければなりません。
例:
<!DOCTYPE html>
<html>
...
</html>
<html> タグの中に、Webページの情報を含むheadタグと、実際のページ内容を表示するbodyタグが入ります。
head タグ
head タグは、Webページのメタ情報を含む部分です。ページ内容そのものは表示されませんが、次のような情報を含めることができます。
-
ドキュメントのタイトル (
<title>) -
キャラクターセット (
<meta>) -
スタイルシート (CSS) (
<link>) -
JavaScriptスクリプト (
<script>)
例:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLの基本構造</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
body タグ
body タグは、ページに実際に表示されるコンテンツを含む部分です。文章や画像、リンク、フォームなどが入ります。
例:
<body>
<h1>ようこそ！</h1>
<p>HTMLの基本構造を学びましょう。</p>
<img src="image.jpg" alt="画像">
</body>
html head bodyタグの関係
HTMLドキュメントは、次のような構成で作られます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>HTMLの基本構造を学びましょう。</p>
</body>
</html>
まとめ
html、head、bodyタグは、HTMLドキュメントの基本構造を形成する重要な要素です。
-
htmlタグは全体を包む -
headタグはメタ情報や設定を含む -
bodyタグはページの内容を表示する
これらの基本を理解することで、HTMLをより効果的に使えるようになります。ぜひ実際に手を動かして試してみてください！