ここではWebページ表示の土台となる HTML を扱います。HTML は HyperText Markup Language の略で、「文書に印を用いて、どこが見出しで、どこが段落で、どこがリンクかを示す言語」です。
1. タグで「意味」を付ける
HTML は タグ で文章を囲むことで、その部分の役割を宣言します。
<h1>これは大見出しです</h1>
<p>これは段落です。<a href="https://example.com">これはリンク</a>。</p><h1>...</h1>のように、開始タグと終了タグで中身を挟みます。href="..."のように、タグには属性で追加情報を持たせられます。- 大事なのは、HTML が指定するのは 意味（構造） であって、見た目ではないという点です。「大きく赤く表示する」ではなく「これは大見出しだ」と述べるだけです。見た目は CSS の担当です。
2. 最小のページ
実際に動く最小の HTML はこんな形です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめての HTML</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これは私の最初のページです。</p>
</body>
</html><head>: 画面には出ない裏方情報（文字コード、タイトル、読み込む CSS/JS など）。<body>: 実際に画面に表示される中身。
3. HTML は「入れ子の木」になる
タグはタグの中に入れられます。この親子関係が、DOM（木構造） と呼ばれるものの正体です。
上の図は、先ほどのページを木にしたものです。html を根として、head と body が枝分かれし、さらにその下に見出しや段落がぶら下がっています。ブラウザも JavaScript も、この木をたどってページを扱います。
4. よく使うタグ
| タグ | 意味 |
|---|---|
<h1>〜<h6> |
見出し（数字が小さいほど大きい階層） |
<p> |
段落 |
<a href=""> |
別ページへのリンク |
<img src=""> |
画像 |
<ul> / <ol> / <li> |
箇条書き / 番号付きリスト / 項目 |
<div> / <span> |
意味を持たない汎用の箱（グループ化用） |
<button> |
ボタン |
5. 「意味づけ」が大事な理由（セマンティック HTML）
近年は <div> の乱用ではなく、<header> <nav> <main> <article> <footer> といった意味のわかるタグを使うことが推奨されています。
こうすると、検索エンジンやスクリーンリーダー（目の不自由な人向けの読み上げソフト）がページ構造を理解しやすくなり、アクセシビリティと SEO の両方が向上します。
まとめ
- HTML はタグで文書に意味を付ける言語。見た目は指定しない。
- タグの入れ子が DOM の木構造になる。
- 意味のわかるセマンティックなタグを使うと、機械にも人にも優しいページになる。