はじめに

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をより効果的に使えるようになります。ぜひ実際に手を動かして試してみてください！