はじめに
HTML5では、多くの新しい要素が導入され、より**意味を持った構造（セマンティックなマークアップ）**が求められるようになりました。
この記事では、実務で頻繁に使うHTML5要素を用途別に整理して、備忘録としてまとめます！
①セクション系タグ（ページの区切り）
| タグ |
用途 |
説明 |
<header> |
ヘッダー |
ページやセクションの上部 |
<footer> |
フッター |
ページやセクションの下部 |
<main> |
メインコンテンツ |
ページの主要な内容をまとめる |
<section> |
セクション |
意味のあるまとまり（章やブロック） |
<article> |
記事 |
独立して成立するコンテンツ（ブログ記事など） |
<nav> |
ナビゲーション |
ページ内のリンクメニュー群 |
<aside> |
補足情報 |
サイドバーや関連情報など |
②テキスト・メディア関連タグ
| タグ |
用途 |
説明 |
<h1>〜<h6> |
見出し |
h1が最上位、h6が最下位 |
<p> |
段落 |
テキストの基本単位 |
<a> |
リンク |
他ページやファイルへのリンク |
<ul> / <ol> / <li> |
リスト |
順不同/順序付きリスト |
<img> |
画像表示 |
画像ファイルを表示 |
<figure>, <figcaption>
|
メディアグループ |
画像とキャプションをまとめる |
③フォーム関連タグ
| タグ |
用途 |
説明 |
<form> |
フォーム本体 |
入力内容を送信するための囲い |
<input> |
入力フィールド |
テキスト、パスワード、チェックボックスなど |
<textarea> |
複数行入力 |
長文入力用 |
<button> |
ボタン |
送信ボタンや通常ボタン |
<label> |
ラベル |
入力フィールドに名前を付ける |
<select>, <option>
|
セレクトボックス |
ドロップダウン形式の選択肢 |
④その他便利なHTML5要素
| タグ |
用途 |
説明 |
<details> |
折りたたみ可能な情報 |
アコーディオンメニューなど |
<summary> |
折りたたみのタイトル |
<details> とセットで使う |
<time> |
日付や時刻 |
コンテンツに日付を明示 |
<mark> |
ハイライト |
強調したいテキスト範囲 |
<progress> |
進行状況バー |
ローディング中などを可視化 |
<meter> |
数値の範囲表示 |
スコアやパラメータ表示に使用 |
⑤実務で特によく使うタグトップ5
| 順位 |
タグ |
用途 |
| 1位 |
<header> |
ページヘッダー |
| 2位 |
<main> |
本文コンテンツ |
| 3位 |
<section> |
複数ブロック分け |
| 4位 |
<nav> |
グローバルナビ |
| 5位 |
<footer> |
ページフッター |
⑥まとめ
- HTML5では「どのタグを使うか」でページ構造の意味が伝わりやすくなる
- 特にセクション系タグ（
<header>, <section>, <nav>, <main> など）は積極的に使う
- フォームやメディア系の新要素も、今後さらに利用機会が増えるので慣れておきたい
