はじめに
このドキュメントの目的
このドキュメントは、ホームページを構成するHTMLタグについて基礎から分かりやすく解説することを目的としています。専門用語をできるだけ抑え、具体例を交えて説明します。初めてHTMLに触れる方でも読み進められるよう配慮しています。
対象読者
・これからウェブ制作を学ぶ初心者の方
・教科書や参考書だけでは理解しにくかった方
・実際に手を動かして学びたい方
本書で扱う内容
各章では次のテーマを順に扱います。
– HTMLタグの基本的な定義
– タグと要素の違い（例:
はタグ、
段落
は要素）
– HTML文書の基本構造（例: <!DOCTYPE html> や 、）
– よく使う基本的なタグとその役割（見出し、段落、リンク、画像など）
読み方のポイント
実際に手を動かして確認すると理解が早まります。簡単なファイルを作ってブラウザで開くと、タグがどのように表示されるかを確かめられます。各章で例を示しますので、コピーして試してみてください。
続く章では、まずHTMLタグの定義から丁寧に説明していきます。ご一緒に学んでいきましょう。
HTMLタグとは何か
タグの役割
HTMLタグは、文章に「意味」や「役割」を与える目印です。たとえば <p> は段落、<img> は画像、<a> はリンクを表します。タグを書くとブラウザがその部分をどう表示するか判断します。
開くタグと閉じるタグ、空要素
多くのタグは開くタグと閉じるタグで囲みます（例: <p>本文</p>）。閉じ忘れると表示が乱れることが多いです。<img> のように内容を囲まない「空要素」もあります（HTML5では <img src="..." alt="..."> のように書きます）。
属性で追加情報を指定する
タグには属性を付けて詳しい指示を出せます。例: <a href="https://example.com">リンク</a> や <img src="photo.jpg" alt="説明">。属性はタグの挙動や表示を細かく制御します。
組み合わせでページを作る
タグを入れ子にして使うことで、見出し・段落・リスト・画像などを組み合わせ、ページ全体の構造や見た目を作ります。ブラウザはその組み合わせをもとに表示を決定します。
注意点
タグ名や属性名は正しく書くことが大切です。スペルや閉じ忘れがあると意図した表示にならないことがあります。
タグと要素の違い
タグとは
タグはHTMLで使う記号です。角かっこ（< >）で囲まれた部分を指します。タグは文書に指示を出す役割を果たし、文字を太字にしたり段落を作ったりします。例:
や
など。
要素とは
要素は開始タグ、コンテンツ、終了タグをまとめたものです。文書の意味と構造を表す基本単位です。たとえば
こんにちは。
はひとつの段落要素になります。要素という言葉はそのまとまり全体を指します。
開始タグと終了タグの例
例:
こんにちは。
–
が開始タグ
–
が終了タグ
– 「こんにちは。」がコンテンツ（中身）
開始タグは要素の始まり、終了タグは終わりを示します。タグ名は一致させてください。
空要素（終了タグがないもの）
imgやbr、inputなどは終了タグを持ちません。例: 
や
。これらは内容を内包せず、単独で使います。
ネスト（入れ子）のルール
要素は入れ子にできますが、正しく閉じる必要があります。正: 文字。誤: 文字。閉じる順序を守るとブラウザが正しく解釈します。
実践のポイント
- 開始タグと終了タグを対応させる
- 空要素は終了タグを書かない
- ネストは内側から閉じる
これらを守るとHTMLの構造がわかりやすくなります。
HTMLの基本構造
概要
ホームページを作るとき、まず基本構造を理解すると作業が楽になります。基本的な枠組みは4つの要素で成り立ちます。
主要タグの説明
- <!DOCTYPE>
文書の型を宣言します。ブラウザに「これはHTML5の文書です」と伝えるラベルのようなものです。 - HTML全体を包むルート要素です。言語設定をここで指定できます（例: lang=”ja”）。
- ページの「裏側情報」を書く場所です。文字コード（meta）、ページ名（title）、CSSやJavaScriptの読み込み（link/script）を記述します。ここの内容は画面上に直接表示されません。
- 実際に表示する内容を記載する領域です。見出し（h1〜）、段落（p）、画像（img）、リンク（a）などをここに置きます。
実際の例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>段落テキスト</p>
</body>
</html>
注意点
headに多くの外部ファイルを入れると読み込みが遅くなることがあります。スタイルはhead、動的処理は必要に応じてbody末尾に置くと表示が早くなります。
よく使う基本的なHTMLタグ
見出しタグ（h1〜h6）
文章のセクション見出しを表します。<h1>がもっとも重要で大きく、<h6>は小さめです。例：
<h1>ページのタイトル</h1>
<h2>章の見出し</h2>
段落タグ（p）
文章のまとまりを示します。改行ではなく段落で囲むと読みやすくなります。例：
<p>これは段落です。複数の文をまとめます。</p>
リンクタグ（a）
ハイパーリンクを作成します。href属性でリンク先を指定します。例：
<a href="https://example.com">外部サイトへ</a>
リンクテキストはわかりやすくします。
画像タグ（img）
画像を表示します。srcで画像のパス、altで代替テキストを指定します。閉じタグは不要です。例：
<img src="image.jpg" alt="風景の写真">
リストタグ（ul、ol、li）
箇条書きを作ります。順序なしは<ul>、順序付きは<ol>、各項目は<li>です。例：
<ul>
<li>りんご</li>
<li>バナナ</li>
</ul>
強調タグ（strong）
重要な語句を太字で示します。意味を伝える目的で使います。例：
<p>これは<strong>重要な注意点</strong>です。</p>
表タグ（table）
データを行と列で整理します。見出しは<th>、データは<td>で表します。例：
<table>
<tr><th>名前</th><th>年齢</th></tr>
<tr><td>山田</td><td>30</td></tr>
</table>
各タグは役割を意識して使うと、読みやすくて扱いやすい文書になります。
