みかおば
📘 HTML初心者のみかおばです！
今回は、これまで何度か登場してきた「HTMLの基本構造」をあらためて整理してみます😊<html> や <head>、<body> って結局どういう役割だったの？と思った方、ぜひここで一度振り返っておきましょう！
💡 HTMLの「基本構造」って？
HTMLは、ページの内容を「枠組み」で整えることで、ブラウザに正しく伝わるように作られています。
その大枠がこちら👇
html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<p>ここが表示される部分です。</p>
</body>
</html>
🧩 <html> タグは“全体の枠”
<html> は、そのページが「HTMLで書かれている」ことを示すタグです。
実際には、ページ全体を包む大きな箱のような存在です。
html<html>
...
</html>
🧩 <head> タグは“裏方”の情報
<head> の中には、ページのタイトルや文字コード、SEOに関する設定など、「表示されないけれど大事な情報」を書きます。
html<head>
<meta charset="UTF-8">
<title>ブログタイトル</title>
</head>
✅ ポイント：Googleなどが情報を読み取るのも、この部分！
🧩 <body> タグは“見える”部分
<body> には、実際にユーザーに表示されるコンテンツ（テキスト・画像・リンクなど）を書いていきます。
html<body>
<h1>こんにちは！</h1>
<p>この文章は画面に表示されます。</p>
</body>
🔍 よくある混乱ポイント
<head>の中に<p>や<img>を書かないようにしましょう（表示されません）<html>の中には、基本的に<head>と<body>の2つだけを入れます<title>タグは「ブラウザのタブ名」や「検索結果のタイトル」に使われます
✅ 覚えておきたいポイントまとめ
| タグ | 役割 |
|---|---|
<html> | ページ全体を囲む枠 |
<head> | 裏方の情報をまとめる部分（SEO・タイトルなど） |
<body> | ユーザーに見える中身を書く部分 |
自分に合いそうな本を探してみて📖
¥2,420 （2025/10/20 14:01時点 | 楽天市場調べ）
ポチップ
📌 次回のテーマ
【第15回】HTMLフォームを深掘りしよう
テキストボックス・チェックボックス・ラジオボタンなど、入力フォームに使われるタグを詳しく見ていきます😊
🔖 この回で出てきたタグ
コメント