HTML: HTMLの基本

Q: などのタグにはなぜ終了タグが必要ないのですか？スラッシュはいつ省略できますか？

これらは「空要素」または「自己終了タグ」と呼ばれ、コンテンツを囲む必要がありません。改行 に「改行のコンテンツ」はなく、画像のパスは src 属性で指定され、タグの間に書かれません。HTML5では末尾のスラッシュは任意です（ と の両方が有効）が、シンプルにスラッシュなしを推奨します。空要素のみ終了タグを省略でき、通常の要素（ 、 <div> など）には終了タグが必要です。

HTMLドキュメントの標準的な構造と基本構文ルールをマスターすることは、適切に構成されたウェブページを作成するための第一歩です。

1. HTMLドキュメントの構造

すべてのHTMLドキュメントは決まった構造フレームワークに従います。ブラウザはこのフレームワークを使ってページの構成要素を理解します。完全なHTMLドキュメントには以下の階層関係が含まれます。

▶ サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
ここに表示されるページコンテンツ
</body>
</html>

▶ 試してみよう

(1) 構造の説明

HTMLドキュメントの各部分は DOM（Document Object Model）と呼ばれるツリー構造で構成されています。ブラウザは各HTMLタグを「ノード」に変換し、ノード間には親子関係や兄弟関係が生まれます。

<!DOCTYPE html> ― ドキュメントタイプ宣言で、ブラウザにこれがHTML5ドキュメントであることを伝えます。必ず最初の行に記述します。
<html> ― ルート要素で、HTMLドキュメント全体の最も外側のコンテナです。他のすべてのタグはこの中に配置します。
<head> ― ヘッドセクションで、メタデータを保存します。ここに書かれた内容はページに直接表示されませんが、エンコーディングやタイトル、スタイル参照などを制御します。
<meta charset="UTF-8"> ― ドキュメントの文字エンコーディングをUTF-8に設定し、特殊文字が正しく表示されるようにします。
<title> ― ページタイトルで、ブラウザのタブや検索エンジンの結果に表示されます。
<body> ― ボディセクションで、すべての表示コンテンツ（テキスト、画像、テーブルなど）を配置します。

このスケルトン構造を理解することは非常に重要です ― これから学ぶすべてのタグは、<head> か <body> のいずれかに配置されます。

📌 DOMの概念：DOMはブラウザが提供するプログラミングインターフェースで、HTMLドキュメント内の各タグを「ノード」として扱います。<html> がルートノードで、<head> と <body> はその子ノード（互いに兄弟関係）です。適切に構造化されたDOMはコードを明確にするだけでなく、SEOやアクセシビリティの向上にも役立ちます。

2. 基本的なタグ構文

HTMLの核となる構成要素は「タグ」です。ブラウザはタグを通じてコンテンツの種類と構造を識別します。タグはペアタグと空タグの2つに分類されます。

(1) ペアタグ

ほとんどのHTMLタグは開始タグと終了タグのペアで構成され、その間にコンテンツを挟みます。

HTML

<p>これは段落です</p>
<h1>これはレベル1の見出しです</h1>
<strong>これは太字のテキストです</strong>

開始タグ： <tagname> ― 山括弧でタグ名を囲んだもの
終了タグ： </tagname> ― タグ名の前にスラッシュが付く
コンテンツ： 開始タグと終了タグの間にあるテキストや他のタグ

(2) 空タグ（自己終了タグ）

一部のタグにはコンテンツがなく、終了タグも必要ありません。これらを空タグと呼びます。

HTML

<br>  <!-- 改行 -->
<hr>  <!-- 水平線 -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="サンプル写真">  <!-- 画像 -->

HTML5では、空タグの末尾のスラッシュは省略可能です（例：  と   はどちらも有効）。シンプルにスラッシュなしが推奨されます。

(3) タグのネストルール

タグは互いにネスト（入れ子）にできますが、「先に開いたものを後に閉じる」という原則に従う必要があります ― 後で開いたタグを先に閉じます。交差ネストは避けてください。

HTML

<!-- 正しいネスト -->
<p>これは <strong>重要なテキスト</strong> の例です</p>

<!-- 間違ったネスト（交差） -->
<p>これは <strong>重要なテキスト</p> の例です</strong>

⚠️ 注意

タグ名は常に小文字で記述してください。 でもブラウザは表示しますが、小文字が業界標準です。

ネストは階層順序を厳守する必要があります。不適切な交差ネストはブラウザの解析エラーを引き起こし、ページレイアウトが崩れる原因になります。

正しいネストは良好なDOM構造の基礎であり、メンテナンスやスタイリングが容易になります。

📌 HTMLコメント：HTMLコメントの詳細な使い方（構文、デバッグテクニック、一般的な使用例など）については、第8章「HTMLコメント」で説明します。今のところ、コメントは  で囲まれ、ページには表示されず、主に開発者向けのメモであることを覚えておいてください。

❓ よくある質問

Q タグ名はなぜ小文字にするのですか？大文字でも正常に動作しますよね？

A ブラウザは大文字小文字を区別しませんが、小文字はW3Cが推奨する業界標準です。理由は3つあります：1）HTML5で明確に推奨されている；2）コードレビューやチーム開発で可読性が高い；3）XHTMLで小文字が厳密に要求されており、一貫性を保つことで将来の移行が容易になります。標準に従うことで、あらゆる環境でコードが正しく動作します。

Q DOMとは何ですか？HTMLとはどのような関係ですか？

A DOM（Document Object Model）は、ブラウザがHTMLコードから構築する「ツリー」です。HTMLはソースコードであり、DOMはブラウザの内部表現です。開発者ツールのElementsパネルで確認できます。DOMが重要なのは、JavaScriptがHTMLファイルではなくDOMを操作し、CSSセレクタもDOMノードにマッチするからです。DOMの理解はフロントエンド開発の基礎です。

Q  などのタグにはなぜ終了タグが必要ないのですか？スラッシュはいつ省略できますか？

A これらは「空要素」または「自己終了タグ」と呼ばれ、コンテンツを囲む必要がありません。改行 に「改行のコンテンツ」はなく、画像のパスはsrc属性で指定され、タグの間に書かれません。HTML5では末尾のスラッシュは任意です（ と の両方が有効）が、シンプルにスラッシュなしを推奨します。空要素のみ終了タグを省略でき、通常の要素（、<div>など）には終了タグが必要です。

📖 まとめ

HTMLドキュメントは決まった骨格を持つ：DOCTYPE → html（ルート要素）→ head + body
タグには2種類ある：ペアタグ（開始と終了がある）と空タグ（自己終了、コンテンツなし）
ネストルール：「先に開いたものを後に閉じる」、交差ネストは不可
タグ名は常に小文字で記述し、良いコーディング習慣を身につけましょう

📝 練習問題

完全なページを作成する： 正しい !DOCTYPE、html、head、body 構造を持つHTMLファイルを作成してください。body内に1つの h1 見出し、1つの p 段落、1つの br 改行、1つの hr 区切り線を追加してください。
ネストの練習： p タグと strong タグを使って、正しくネストされた文章を書き、次にわざと交差ネストの間違った例を書いてください。ブラウザで2つのバージョンがどのように異なって表示されるか観察してみましょう。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて