HTML（HyperText Markup Language）は、Webサイトの「骨組み」と「意味」を定義するための言語です。テキストに <p> や <h1> といったタグで名札を付けることで、情報の役割を明確に伝えます。現在の標準である HTML5 では、動画再生機能や、意味をより正確に伝えるタグ（<header> など）が強化されています。
HTMLを正しく書くことは、人間だけでなく AI や検索エンジンにもサイト構造を正しく伝える「Web制作の基礎」です。
HTMLの土台となる4つのタグ
HTMLドキュメントは、大きく4つのタグで構成されます。
| タグ | 役割 |
|---|---|
<html> |
Webサイトの「一番外枠」 |
<head> |
ブラウザへの「指示・設定」 |
<body> |
ユーザーに見える「コンテンツ」 |
<meta> |
ページの「自己紹介データ」（<head> 内に記述） |
最も基本的なHTMLの構造は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>こんにちは</p>
</body>
</html><!DOCTYPE html> は「文書型宣言」で、このドキュメントがHTML5で作られていることをブラウザに伝えます。
タグと要素の違い
タグ（Tag）とは
タグは要素の「境界」を示すマーク（目印）です。< と > で囲まれた文字で、開始タグと終了タグのペアで要素を挟みます。
- 開始タグ：
<p>、<h1>のように要素の始まりを示す - 終了タグ：
</p>、</h1>のようにスラッシュ/が付く - 空要素タグ：
<br>や<img>のように内容を持たず終了タグがない
要素（Element）とは
要素はタグで囲まれた「情報全体（構造＋内容）」を指す単位です。開始タグ・内容（文字や画像）・終了タグを含めたパッケージ全体が「要素」です。
例：<p>こんにちは</p>
呼び方の基本ルール
| 記述 | 要素としての呼び方 | タグとしての呼び方 |
|---|---|---|
<h1>...</h1> |
h1要素 | h1タグ |
<p>...</p> |
p要素 | pタグ |
<a>...</a> |
a要素（アンカー要素） | aタグ（アンカータグ） |
<div>...</div> |
div要素 | divタグ |
<br> |
br要素（空要素） | brタグ（改行タグ） |
現場では「pタグ」のように要素全体を指して「タグ」と呼ぶことも多いですが、厳密には上記のような違いがあります。
主要なHTMLタグの役割と使い方
HTMLの記述は、各タグを特定の役割を持つ「部品」として選び、積み上げていく構築作業です。ブラウザはタグの指示のみに従うため、エディタ上での改行やスペースはそのまま画面に反映されません。意図した構造を実現するには、必ず適切なタグで内容を囲む必要があります。
見出し：<h1>〜<h6>
見出しタグは「何について書かれているか」を示すラベルです。<h1> が最も重要で、数字が大きくなるほど細かな項目になります。ランクを飛ばして使うことはできません（<h2> の次は <h3>）。
段落：<p>
段落タグ（Paragraph）は、ひとまとまりの文章を定義します。ブラウザは <p> で囲まれた塊を一つの「段落」として扱います。
汎用コンテナ：<div>
<div>（Division の略）は「意味を持たない透明な箱」です。複数の要素をひとまとめにするための汎用的なグループ化コンテナで、ブラウザで表示しても色や形は表示されません。CSSでスタイルを当てるときに活用します。
画像：<img>
<img> タグは外部の画像ファイルを読み込むための空要素タグです。主な属性は以下のとおりです。
src：画像ファイルのパス（住所）alt：画像の説明テキスト（代替テキスト）width/height：ピクセル単位でサイズを指定
<img src="images/photo.jpg" alt="画像の説明テキスト" width="500" height="300">リンク：<a>
<a> タグでリンクを作成します。主な属性は以下のとおりです。
href：リンク先のURLやファイルパスtarget="_blank"：リンクを新しいタブで開く
<a href="https://google.com" target="_blank">Googleで検索する</a>セマンティックタグ
<div> が「意味を持たない透明な箱」であるのに対し、HTML5 で導入された「特定の場所や役割を明示する箱」をセマンティックタグ（意味論的なタグ）と呼びます。これらを使うことで、ブラウザや検索エンジン、また他の制作者にもサイト構造が一目でわかるようになります。
| タグ | 用途 |
|---|---|
<header> |
ページの最上部（導入部）／サイトロゴ・タイトルなど |
<nav> |
ナビゲーション／メニュー項目・ページ内リンク |
<main> |
ページの主要な中身（1ページに1つ） |
<footer> |
ページの最下部（コピーライト・連絡先など） |
<article> |
ブログ記事やニュースなど、それ自体で完結した内容 |
<section> |
意味のまとまり（章や節）を示す区切り |
<aside> |
余談・補足情報（サイドバー・広告バナーなど） |
リスト・表・フォーム
リスト：<ul>・<ol>・<li>
関連する項目を箇条書きで並べるときに使います。
<ul>：順不同のリスト（通常は「●」が付く）<ol>：順序があるリスト（自動的に「1. 2. 3.」と番号が付く）<li>：リストの各項目（必ず<ul>や<ol>の中に入れる）
表：<table>
料金表やスケジュールなど、縦横の軸で整理された情報を表示します。
<table>：表全体の枠組み<tr>：行（横一列）<th>：見出しセル（太字・中央寄せ）<td>：データセル<thead>/<tbody>/<tfoot>：表の各セクション
フォーム：<form>
お問い合わせフォームや検索窓など、ユーザーからの情報をサーバーへ送るための仕組みです。
<form>：フォーム全体の範囲（送信先をaction属性で指定）<input>：1行の入力欄やチェックボックス（type属性で種類が変わる）<textarea>：長文のメッセージ入力欄<button>：送信ボタン
ブロック要素とインライン要素
HTMLの各タグには、画面上での「並び方」を決定する2つの性質があります。この違いを理解しないと、「横に並べたいのに並ばない」「余白が効かない」といったトラブルの原因になります。
ブロック要素
ページの「大きな塊」を作る要素です。主なタグ：<div>、<h1>〜<h6>、<p>、<ul>、<table> など。
- 必ず新しい行から始まり、横幅いっぱいに広がる
- 次の要素はその下に配置される
- CSSで幅・高さ・余白（margin/padding）を自由に指定できる
インライン要素
文章の「一部」として扱われる要素です。主なタグ：<span>、<a>、<strong>、<em>、<img> など。
- 新しい行にはならず、文章の流れに沿って左から右へ並ぶ
- 中身のテキストや画像の幅しか持たない
- 基本的に幅・高さの指定が効かず、上下の余白も正しく適用されない
入れ子の重要なルール
<!-- OK: ブロック要素の中にブロック/インライン要素 -->
<div><p>あいうえお<span>かきくけこ</span></p></div>
<!-- NG: インライン要素の中にブロック要素 -->
<span><div>ここはダメ</div></span>※例外として、HTML5 では <a> タグの中に <div> などを入れることが許可されています。
その他の便利なタグ
| タグ | 用途 |
|---|---|
<strong> |
強い重要性・緊急性（太字で表示） |
<em> |
言葉の強調・アクセント（斜体で表示） |
<span> |
インラインの汎用コンテナ（CSSで見た目を変更） |
<br> |
改行 |
<hr> |
区切り線 |
<iframe> |
外部サイト（YouTubeやGoogleマップなど）の埋め込み |
<blockquote> |
引用文 |
<address> |
ページ作成者・連絡先・住所 |
コメントの活用
<!-- --> で囲まれた部分はブラウザに表示されず、ソースコード上にのみ残ります。ソースの役割を記載しておくと後から見返しやすくなります。また、コードを一時的に無効化（コメントアウト）したい場合にも活用できます。
<!-- ここからヘッダー -->
<header>
<h1>サイトタイトル</h1>
</header>
<!-- /ヘッダーここまで -->まとめ
HTMLはWebサイトの「骨格」を作る言語で、タグという部品を組み合わせて構造と意味を定義します。押さえておくべきポイントをまとめます。
- タグと要素の違いを理解する（タグは境界マーク、要素は構造＋内容の全体）
- 土台の4タグ（
<html>・<head>・<body>・<meta>）でページの枠を作る - セマンティックタグを使って意味ある構造を表現する
- ブロック要素とインライン要素の違いを理解してレイアウトトラブルを防ぐ
- タグをすべて暗記する必要はなく、「リストにはリスト系タグ」「表にはtableタグ」という引き出しを持ち、必要なときに調べる姿勢が大切
次のステップでは、CSSを使ってこのHTML骨格に「見た目」を付けていきます。HTMLの構造をしっかり理解した上でCSSを学ぶと、レイアウトの仕組みがより自然に身につきます。
