HTMLは、Webページが持つべき情報の骨格を作る言語です。それぞれの要素（タグ）には意味と役割があり、正しく使うことで検索エンジンにもユーザーにも理解しやすい、意味のある構造（セマンティクス）を作ることができます。
この記事では、Webページ作成の基本となる要素を、HTML Living Standardに準拠した最新の使い方で、分かりやすく解説します。
1. ページの土台となる基本構造
これらの要素は、すべてのHTML文書の基本となる入れ物（コンテナ）です。
| 要素 | 役割（平易化） | 説明 |
<html> | すべてを包む親玉 | 文書全体の始まりと終わりを示す、ルート（根っこ）の要素。 |
<head> | ページの見えない情報 | ページの設定、タイトル、文字コードなど、ブラウザや検索エンジンに伝えるための「メタデータ」を格納する部分。 |
<body> | ユーザーに見せる中身 | 実際にWebブラウザに表示される、すべてのコンテンツ（文章、画像、リンクなど）を入れる本体。 |
2. ページを意味のあるブロックに分ける「セクション要素」
<body>の中のコンテンツを、役割ごとに大きなブロックに分けるための要素です。これらの要素を使うことで、Webページの構造が一目でわかります。
| 要素 | 役割（平易化） | 配置のイメージ |
<main> | 一番重要なコンテンツ | 文書の中で最も主要な内容（本文）を入れる部分。原則として1ページに一つだけ使います。 |
<header> | セクションの冒頭・導入 | 記事やセクション、またはページ全体のヘッダー（導入部）。ロゴ、タイトル、リード文などが含まれます。 |
<footer> | セクションの末尾・補足 | 記事やセクション、またはページ全体のフッター（末尾）。著作権情報や関連リンクなどが含まれます。 |
<nav> | 移動するための案内所 | メインメニューや目次など、他のページやセクションへ移動するためのナビゲーションリンクのグループ。 |
<article> | 独立して成り立つ記事 | ブログ記事、ニュース、フォーラムの投稿など、それ単体で完結し、独立して意味を持つコンテンツ。 |
<section> | 意味で分けたまとまり | 関連性の高いコンテンツを意味のあるテーマでグループ化する、一般的なセクション（章や節）。 |
<aside> | 補足・寄り道の情報 | メインコンテンツから少し逸れた、補足的な情報（広告、関連リンク、サイドバーなど）。 |
3. 文章やリストを構成する「テキスト要素」
コンテンツ内の文章の役割を定義し、構造化するための要素です。
| 要素 | 役割（平易化） | 説明 |
<p> | 普通の段落 | 一つのまとまった文章（パラグラフ）を示す基本的な要素です。 |
<ul>, <ol>, <li> | リスト・箇条書き | <ul>は順序のないリスト（箇条書き）、<ol>は順序のあるリスト（番号付きリスト）です。その項目一つ一つが<li>です。 |
<blockquote> | 他の人からの引用 | 他のWebサイトや書籍からの長い引用文をマークアップします。 |
<figure>, <figcaption> | 図表とその説明 | 写真やグラフ、コード例など、本文とは別に提示する図表（<figure>）と、その説明文（<figcaption>）をセットで使います。 |
4. 文章に意味的な強調を加える「インライン要素」
テキストの一部に対して、意味や役割を与えるための要素です。装飾目的（文字を太くするだけなど）での使用は非推奨です。
| 要素 | 役割（平易化） | 使い方 |
<a> | リンクを貼る | 他のページやファイル、セクションへ移動するためのアンカー（リンク）を作成します。 |
<strong> | 強い重要性 | 非常に重要な内容や緊急性を伝える部分に使います。 |
<em> | 意味的な強調 | 通常とは違うニュアンスで発音すべき、強調したい語句に使います。 |
<code> | プログラムコード | プログラミングのコードや、マークアップ言語のタグを表現する際に使います。 |
<mark> | ハイライト表示 | テキストの一部を蛍光ペンで引いたようにハイライト表示し、注目させます。 |
5. ユーザーからの入力を受け付ける「フォーム要素」
ユーザーが情報を入力し、サーバーへ送信するための要素です。
| 要素 | 役割（平易化） | 説明 |
<form> | 入力の受付全体 | ユーザーが入力したデータを送信するための、入力欄全体をまとめる要素です。 |
<input> | 色々な種類の入力欄 | テキスト入力、チェックボックス、ラジオボタン、ファイル選択など、様々な機能を持つ入力欄を作成します。 |
<textarea> | 複数行のテキスト入力 | 複数行にわたる長い文章（お問い合わせ内容など）を入力するための欄。 |
<button> | 実行するためのボタン | クリックすることで何らかのアクション（送信、リセットなど）を実行するためのボタン。 |
<label> | 入力欄の説明書き | for属性を使って、どの入力欄（<input>など）の説明文なのかを関連付けます。 |
6. 現在は非推奨（廃止要素）と新しい要素
HTMLの仕様は進化しており、古い要素が廃止されたり、新しい役割を持つ要素が追加されたりしています。最新のWeb制作では、これらの動向を把握しておくことが重要です。
6-1. 現在は非推奨・廃止された要素
これらの要素は、原則として現在のWeb制作では使用を避けるべきものです。
| 要素 | 役割（元の用途） | 非推奨・廃止の理由 |
<hgroup> | 見出しのグループ化 | 複数の見出しをまとめるための要素でしたが、現在は非推奨とされています。必要に応じて<div>などで代用します。 |
<keygen> | 暗号鍵の生成 | セキュリティ関連の要素でしたが、仕様から削除され、現在ブラウザでは機能しません。 |
<command>, <menuitem> | メニュー項目の定義 | ブラウザでの実装が進まなかったため、非推奨とされています。 |
6-2. 新しい機能を持った要素
これらはHTML5以降に登場した、特定の用途に役立つ便利な要素です。
| 要素 | 役割（平易化） | 説明 |
<dialog> | モーダルウィンドウ | ユーザーの操作を一時的にブロックして表示する、ダイアログ（モーダルウィンドウ）を作成します。 |
<template> | 再利用する型 | ブラウザには表示されず、JavaScriptを使って後からページに挿入し、再利用するためのコンテンツの**ひな形（テンプレート）**を定義します。 |
<slot> | Webコンポーネントの挿入場所 | Web Componentsという技術において、外部からコンテンツを挿入するための「差し込み口」を定義する要素です。 |
注意：意味を持たせて使うことが大切
HTMLの重要な考え方は、**「意味を持たせる（セマンティックである）」**ことです。
- 装飾だけを目的に、要素の本来の意味と違う使い方をすることは避けましょう。
- 例えば、文字を太くしたいだけならCSSを使います。
<p>タグは単に太字にするためではなく、段落という意味を持たせたいときに使います。
まとめ：学習のロードマップ（最適化された構成）
初心者はまず以下の流れで要素を学習し、必要に応じて新しい要素を取り入れると理解が深まります。
- ページの土台（
<html>,<head>,<body>） - 大きなブロック分け（セクション要素：
<main>,<header>,<footer>,<article>など） - 文章の構造化（テキスト要素：
<p>,<ul>,<a>など） - ユーザーとのやり取り（フォーム要素：
<form>,<input>,<button>など） - 新しい機能（
<dialog>,<template>など）
関連情報
HTMLの基本的な要素と構造を理解したら、さらに詳しい情報や個別のタグの解説に進みましょう。