HTMLの基本タグ

HTML基本タグ

HTMLを書く上で最初に覚えるべきタグは数十種類あります。ただし、日常的に使うタグは限られています。このレッスンでは、すべてのHTMLファイルに必要なDOCTYPE宣言・html・head・bodyの基本構造から、メタタグの役割、意味を持つセマンティックタグ、そして実務でよく使うタグ20選を学びます。タグの意味を理解してから使うことで、SEOやアクセシビリティにも配慮したコードが書けるようになります。

---

HTMLの基本構造

すべてのHTMLファイルは以下の骨格から始まります。この構造はVSCodeで「!」→Tabキーで自動生成できます。

HTML文書の基本構造とセマンティックタグ

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言はHTMLファイルの最初の行に必ず書くものです。「このファイルはHTML5で書かれています」とブラウザに伝えます。DOCTYPE宣言がないと、ブラウザが「互換モード」で動作し、CSSのレンダリングに予期しないズレが生じます。

html要素

<html lang="ja">
  ...
</html>

すべてのHTMLコンテンツを囲むルート要素です。lang属性で言語を指定します。日本語サイトはlang="ja"、英語サイトはlang="en"と書きます。言語指定はスクリーンリーダーの読み上げやSEOに影響します。

head要素

head要素には**ページの設定情報（メタデータ）**を書きます。画面上には表示されませんが、ブラウザやSEOにとって重要な情報を含みます。

body要素

body要素には実際に画面に表示されるコンテンツを書きます。テキスト・画像・リンク・フォームなど、ユーザーが目にするすべての要素はここに記述します。

---

メタタグの役割

headの中に書くメタタグは、ページの動作やSEOに直結します。最低限覚えるべき4つのメタタグを解説します。

⚠️ charsetは最初に書く: <meta charset="UTF-8">はheadの先頭に書きます。文字コードが後で指定されると、それより前のテキストが文字化けする場合があります。

SEOに関係するメタタグ

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLの基本を学ぼう | Web制作入門</title>
  <meta name="description" content="HTMLの基本タグを分かりやすく解説。初心者でも理解できる実例付きで説明します。">
  <link rel="stylesheet" href="style.css">
</head>

titleはページごとに異なる内容を設定し、30〜60文字程度が推奨されます。descriptionは80〜120文字で、そのページの内容を簡潔に表現します。

---

セマンティックタグとは

セマンティック（semantic）とは「意味のある」という意味です。HTMLには意味を持つタグと意味を持たないタグがあります。

意味を持たないタグ（非セマンティック）

• ◆<div> — ブロックレベルの汎用コンテナ。意味はなく、レイアウト目的で使う
• ◆<span> — インラインの汎用コンテナ。文中の一部をスタイル変更するときに使う

意味を持つタグ（セマンティック）

セマンティックHTMLを使う理由

1. ◆SEO向上: Googleのクローラーがページ構造を正しく理解しやすくなります
2. ◆アクセシビリティ改善: スクリーンリーダーがナビゲーションや主要コンテンツを識別できます
3. ◆コードの可読性: <div id="header">より<header>のほうが、コードを読んだときに意味が明確です
4. ◆保守性向上: 複数人での開発時にどのエリアがどこかを把握しやすくなります

💡 divを使っても動く、でも…: <div id="nav">と<nav>は見た目の動作は同じです。しかしSemanticタグを使うことで、検索エンジンとスクリーンリーダーに正しい情報を伝えられます。現代のHTMLコーディングではセマンティックタグを積極的に使うのが標準です。

---

よく使うタグ20選

実務で毎日使うタグを20個に絞って解説します。これだけ覚えれば基本的なページは作れます。

テキスト・見出し系（6タグ）

リスト系（3タグ）

リンク・メディア系（4タグ）

構造・レイアウト系（4タグ）

フォーム系（3タグ）

---

タグの書き方ルール

HTMLタグには守るべき基本ルールがあります。

開始タグと終了タグ

ほとんどのタグは開始タグと終了タグのペアで使います。

<p>これは段落です。</p>
<h1>見出しテキスト</h1>
<a href="https://example.com">リンクテキスト</a>

自己終了タグ（空要素）

内容を持たないタグは開始タグのみで完結します。

<img src="photo.jpg" alt="写真の説明">
<br>
<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

タグのネスト（入れ子）

タグは正しい順序でネストする必要があります。開いたタグは同じ順序で閉じます。

<!-- 正しいネスト -->
<ul>
  <li><a href="/">ホーム</a></li>
  <li><a href="/about">会社概要</a></li>
</ul>

<!-- 誤ったネスト（交差している） -->
<ul><li><a href="/">ホーム</li></a></ul>

⚠️ タグの閉じ忘れに注意: タグを閉じ忘れると、それ以降のHTML全体がそのタグの中にある扱いになり、レイアウトが大きく崩れます。VSCodeのAuto Rename Tag拡張機能を使うと、閉じタグの管理が楽になります。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆HTML雛形を作る: VSCodeで「!」→Tabキーを押し、HTML5の雛形を自動生成する。lang属性を「ja」に変更し、titleとdescriptionメタタグを自分のサイト想定で記入する。
2. ◆セマンティック構造を書く: body内にheader・nav・main・section・footer の5つのセマンティックタグを使ったページ骨格を作る。各タグの中にはh1やh2でテキストだけ入れた状態でよい。
3. ◆よく使うタグを実際に書く: h1〜h3・p・ul/li・ol/li・a・img タグを使って、自己紹介ページのHTMLを作る。LiveServerで表示を確認する。
4. ◆DevToolsで確認: 作ったHTMLをChromeで開き、DevToolsのElementsパネルで各タグがツリー構造になっていることを確認する。h1タグをクリックして、右側のStylesで適用されているスタイルを確認する。

📝まとめ

HTMLは<!DOCTYPE html>・<html>・<head>・<body>の4つの骨格から構成されます。headには文字コード・viewport・titleなどのメタ情報を、bodyには実際に表示するコンテンツを記述します。セマンティックタグを使うことで、SEOとアクセシビリティが向上します。実務でよく使うタグ20選を押さえておけば、基本的なページは作れます。次のレッスンではテキスト・リスト・リンク・画像タグの詳しい使い方を学びます。