「セクション」に分類される要素は、ページ内のコンテンツを体系的にグループ分けします。「記事」であったり、「ナビ」であったり「ヘッダー」「フッター」等です。
これらの中でarticle, nav, aside, section は、見出し要素を持ち、アウトラインを形成する「セクショニングコンテンツ」に分類されます。
（※bodyはセクショニングコンテンツではないがアウトラインを持ちます）

<body> 利用度：★★★

コンテンツ

<body>要素は、ページ内コンテンツの本体（コンテンツ記載）部分になります。通常HTML要素内において、head要素に続いてに配置され、全てのコンテンツを内包します。

<article> 利用度：★★

独立したコンテンツ

<article>はページ内にて自己完結したコンテンツを表します。これは<article>要素内のコンテンツが、外部メディア等にて単体で再利用可能なものとなります。例えばブログやニュースの記事、フォーラムや掲示板の投稿文などです。

<section> 利用度：★★★

汎用的なセクション

<section>要素は、ページ内のコンテンツの一般的なセクション（区間、節、章）を表します。通常セクションには見出し要素を伴います。

<nav> 利用度：★★★

ナビゲーション

<nav>要素は、現ページ内外の別箇所へリンクを張るナビゲーションを記載する為の要素です。一般的に、サイトメニューやページ内目次、サイトの階層を表すパンクズリストなどに使用されます。

<aside> 利用度：★★

補足・関連情報

<aside>要素は、メインコンテンツとは直接関係の無い間接的なコンテンツを表す要素です。ページ内のコンテンツの補足的なものや、広告表示、またサイドバーのサイトメニュー等が該当します。

<h1>-<h6> 利用度：★★★

見出し

<h1>-<h6>要素は、そのセクションの見出しを表します。h1が最上級でh6が最下級となります。

<hgroup> 利用度：★

見出しのグループ化

<hgroup>同一セクションの複数の見出しをグループ化します。同一のセクション（同一の章）のコンテンツにおいてh1でメイン見出し、h2で見出しの補足を表す場合など。

W3C版ではHTML5にて廃止。WHATWG版では存続。

<header> 利用度：★★★

ヘッダー

<header>要素は、ページやコンテンツの導入部分であることを表します。ページそのものヘッダー、各セクションのヘッダーとして利用することができます。

<footer> 利用度：★★★

フッター

<footer>要素は、ページやコンテンツのフッター部分であることを表します。ページそのものフター、各セクションのフッターとして利用することができます。

<address> 利用度：★★

連絡先・問い合わせ先

<address>は、サイトやページ、及び記事の管理者、著者の住所やメールアドレスなど、連絡先情報を表示する要素です。

コンテンツのグループ化Grouping Content

<p> 利用度：★★★

段落

<p>は、テキスト（文章）の段落を示す要素です。

<hr> 利用度：★★

段落の区切り

<hr>は、文章の段落レベルでの内容的な転換や区切りを示す要素です。内容や閉じタグが無く、<hr>単体で記述利用します。

<pre> 利用度：★

整形済みテキスト

<pre>は、整形済みテキストのブロックを表す要素です。brタグを使わない改行や半角スペースをそのまま表示します。プログラムコード等を表示したりする際に使われます。

<blockquote> 利用度：★★

引用

<blockquote>は、外部のソースからの引用文を表示するセクションの要素です。独自の文章等には使用されず、あくまで引用文の表示に使用します。

<ol> 利用度：★★

リスト（順序あり）

<ol>は、意図的に順序を付けられた項目リストを表す要素です。例えばランキングの順位など、順序が変わると意味合いが変わってしまうようなリストが挙げられます。

<ul> 利用度：★★★

リスト（順序無し）

<ul>は、順序付けの必要の無い項目リストを示す要素です。項目の順序を変更してもリスト内容の意味合いが変わらないようなものです。

<menu> 利用度：★

ユーザー操作項目メニュー（順序無し）

<menu>は、ユーザー操作を行うための項目をリスト化し表示する要素です。
brが単にリスト項目の表示に使われるのに対し、menuではユーザー操作（コピー、ペースト等）を目的とした項目を扱います。

W3C版ではHTML5.2で廃止。WHATWG版では存続。

<li> 利用度：★★★

リスト項目

<li>は、リストの項目を記述する要素です。ol、ulの子要素として、それら親要素にて定義された意味合いを持つリスト項目となります。

<dl> 利用度：★★

説明リスト

<dl>は、dt（説明項目名）とdd（説明項目内容）が対になりグループ化されたリストを表示する要素です。
HTML5以前は定義リストと呼ばれていたものです。また関連リストや、記述リスト等とも呼ばれています。（WEBDEZ TVでは説明リストに統一）

<dt> 利用度：★★

説明リスト項目名

<dt>は、説明リストにおいて項目の名前を示す要素です。dl要素の子孫要素としてのみ利用できます。

<dd> 利用度：★★

説明リスト項目内容

<dd>は、説明リストにおいて項目の説明内容を示す要素です。dl要素の子孫要素としてのみ利用できます。

<figure> 利用度：★

図版・図表の表示

<figure>は、イラストや写真、画像、グラフやソースコードなど、図版（図表）として扱いたいコンテンツを示す要素です。

<figcaption> 利用度：★

図版・図表のキャプション

<figcaption>は、figureで示した図表にキャプションを付けたい場合に利用する要素です。

<main> 利用度：★★

主要コンテンツ

<main>はそのページ内の主要コンテンツを表します。基本的にページ内に1つしか表示要素があってはいけません。複数存在させる場合は1つを残しhidden属性を使い表示上隠す必要があります。

<div> 利用度：★★★

汎用要素（ブロック）

<div>は、HTML構造上、特に意味合いを持たないブロック範囲（区分け）を表す汎用的な要素です。CSSを適用しレイアウトやデザインを行う際に使用されることが多いです。
セクションや記事、ヘッダーなど、意味合いを持つブロックには該当する要素を使うようにします。

テキストへの意味付けText Level Semantics

<a> 利用度：★★★

ハイパーリンク

<a>は、同一ページ内の指定箇所や別ページ、また電子メールアドレスや別のサイトURLなどへのハイパーリンクを作成する要素です。

<em> 利用度：★★

テキストの強調

<em>は、強調したいテキストを明示する要素です。複数のemを入れ子にすることで強調の度合いを高めることができます。

<strong> 利用度：★★

強い重要性

<strong>はそのコンテンツにおける、強力な重要性、深刻性、緊急性を持つテキストに利用する要素です。strongでマークアップされたテキストは通常太字で表示されます。

<small> 利用度：★

注釈

<small>要素は、注釈や警告、免責事項、著作情報など、副次的なコメントを表すために使用されます。smallでマークアップされたテキストは通常1段小さなフォントサイズで表示されます。

<s> 利用度：★

変更・更新済みの情報

<s>は、すでに適切、正確ではない内容や、すでに関連の無くなった内容を打ち消す用途で使用される要素です。s要素が使用されたテキストは打ち消し線が表示されます。
内容の修正を表す場合には<s>ではなく、<del>や<ins>を使います。

<cite> 利用度：★

作品のタイトル

<cite>要素は、作品（映画、本、音楽、WEBサイト、ゲームetc...）の題名、タイトルを表します。
通常cite要素で記述されたテキストは斜体（イタリック）で表示されます。

<q> 利用度：★★

引用文

<q>は、他のソースからの引用文・引用句を記述する要素です。モダンブラウザーでは引用文の前後に引用符（クオーテーション）を自動で追加し表示されます。
短い引用文での利用が適切であり、長文の引用には<q>ではなく、<blockquote>を利用します。

<dfn> 利用度：★

定義

<dfn>は、定義された用語を表す要素です。

<abbr> 利用度：★

略語・頭字語

<abbr>は略語や頭字語を表す要素です。略語は例えば「HyperText Markup Language」の略である「HTML（エイチティーエムエル）」等のことで、頭字語とは「North Atlantic Treaty Organization」を略した「NATO」など、頭文字の綴りで「ナトー」と読むものなどが該当します。

<ruby> 利用度：★

ふりがな（ルビ）

<ruby>は、漢字や用語にフリガナを表示させる際に、そのフリガナを表示させる語句の指定に利用する要素です。

<rt> 利用度：★

ふりがな（ルビ）

<rt>は、rubyで指定した親文字に対し、実際にフリガナを付ける際に利用する要素です。

<rp> 利用度：★

ふりがな（ルビ）

<rp>は、ルビの表示に対応していないブラウザー向けに代替表示用に括弧（）を表示させるための要素です。rpタグで括られた括弧は、ルビ表示に対応しているブラウザでは表示されません。

<data> 利用度：★

機械可読形式データの付与

<data>は、タグ付けしたコンテンツに、機械可読形式データ（ソフトウェアが認識できる形式のデータ）を付与する際に利用する要素です。Javascriptでデータを処理する場合等に利用することが想定されています。

<time> 利用度：★★

日時

<time>は、日付、日時を表す要素で、タグ付けした日時（のテキスト）に機械可読形式データ（ソフトウェアが認識できる形式のデータ）での正確な日時を付与する目的で利用します。

<code> 利用度：★

コンピューター・コード

<code>要素は、その文字列がプログラムやスクリプトなどのコンピューターコードであることを示すために利用されます。一般的なブラウザでは等幅フォントで表示されます。

<var> 利用度：★

変数

<var>は、その語句が変数であることを示す要素です。計算式や、プログラムコード内の変数にあたる語句を<var>でマークアップします。

<samp> 利用度：★

コンピューターからの出力内容

<samp>は、コンピューターからの出力内容（表示内容）であることを表す要素です。
例えばPC上で何かを実行した際に画面に表示された文章を、例として明示する場合などが該当します。

<kbd> 利用度：★

コンピューターへの入力内容

<kbd>要素は、ユーザーによるコンピューターへの入力内容を示す要素です。通常はキーボードの入力内容（Enterや、CTRL+F 等）を指しますが、音声入力やその他の入力（ゲームパッドのボタンなど）に利用することもできます。

<sub> 利用度：★★

下付き

<sub>要素は、下付き文字を表示する際に利用されます。例えば化学式などが分かりやすい例と言えます。

<sup> 利用度：★★

上付き

<sup>要素は、上付き文字を表示する際に利用されます。数式での2乗などが分かりやすい例と言えます。

<i> 利用度：★★

声や学名、慣用句などの区別

<i>は、メインとなる文脈とは区別したいテキストに利用する要素です。例えば説明文の中で著者の思考などを差し込む場合や、説明している対象コンテンツの学名や、日本語での文章の中に出てくる外国語での記述などが考えられます。

<b> 利用度：★★

注目してほしい語句の区別

<b>は、閲覧者に注目させたい語句で、特別な重要度や意味付けを持たないマークアップ用の要素です。

<u> 利用度：★

不明瞭な語句の区別

<u>は誤字やスペルミスなどの非テキスト、不明瞭な語句を区別するために用いる要素です。

<mark> 利用度：★

マーク・ハイライト

<mark>は、別の文脈との関連性から、参照目的でハイライト表示されるテキストを表す要素です。また、検索した文字列に一致するテキストのハイライトにも使えます。

<bdi> 利用度：☆

双方向アルゴリズムの分離

<bdi>は、双方向テキストの書式設定に対し、その設定から分離させたいテキストを示す要素です。
例：左から右へ書く日本語や英語のテキストの中で、右から左へ書くアラビア語を記述する際などに利用する。

<bdo> 利用度：☆

双方向アルゴリズムの変更

<bdo>は、元々のテキストの記述方向を上書き変更しコントロールするための要素です。dir属性を付与し、右から左へ書くように指定できます。

<span> 利用度：★★★

汎用要素（インライン）

<span>要素は、指定したテキストを一つのまとまりとして扱う際に使用します。span要素自体に意味は持たず、例えばclass属性等を付与し、cssを活用してスタイルを反映させる場合などに利用されます。

<br> 利用度：★★★

改行

<br>は、文章中に改行を入れる場合に利用します。
行間の調整や、コンテンツ同士のマージン（隙間）調整の為に利用してはいけません。

<wbr> 利用度：★

改行を認める箇所

<wbr>要素は、ブラウザーによる改行を許可する位置を指定する際に使用します。またブラウザーによる改行をする必要が無い場合は改行を行いません。

テキストの編集Edits

<ins>利用度：★

追加されたテキスト

<ins>は、そのページのコンテンツに後から追加されたテキストであることを表す要素です。

<del> 利用度：★

削除されたテキスト

<del>は、そのテキストが、既にページから削除されたものであることを表す要素です。通常、打消し線を伴って表示されます。

埋め込みコンテンツEmbedded Content

<picture> 利用度：★★

端末・画面状況に応じた画像ソースの提供

<picture>要素は、<source>要素と、<img>要素を内包し、<source>要素に指定したmedia属性に対し、画面の幅に応じた画像を選択表示させる為に利用します。

<source> 利用度：★★

複数のメディアリソースの指定

<source>は、メディア要素内で使用され、代替用含む複数のファイルのソースを指定する要素です。
picture内であれば画面サイズに応じた画像ファイルの指定を、video内であれば複数のフォーマットの動画ファイルのソースを指定します。

<img> 利用度：★★★

画像

<img>は、ページ内に画像を埋め込み表示させるための要素です。

<iframe> 利用度：★★

インラインフレーム

<iframe>要素は、外部ページ（外部サイトも可）のコンテンツを入れ子にし表示させるインラインフレームを作成します。

<embed> 利用度：★

外部コンテンツの埋め込み箇所

<embed>は、外部のメディアコンテンツやアプリケーション、プラグインを要するデータなどをページ内に埋め込む際に利用する要素です。

<object> 利用度：☆

外部コンテンツ

<param> 利用度：☆

プラグインのパラメーター

<param>要素は、<object>要素によって埋め込まれたプラグインのパラメーターを指示します。
object要素の子要素として使用するものであり、<param>要素単独で意味を持つものではありません。

<video> 利用度：★★

ビデオ

<video>は、動画の埋め込み、再生をする為に使用する要素です。対応するブラウザーにおいて、プラグインを必要とせず動画の再生を行う事ができます。

<audio> 利用度：★★

オーディオ

<audio>は、音声（オーディオ）データの埋め込み、再生をする為に使用する要素です。対応するブラウザーにおいて、プラグインを必要とせず音声データの再生を行う事ができます。

<track> 利用度：★

テキストトラック

<track>要素は、<audio>、<video>要素の子要素として使用され、WebVTTフォーマットでの整形や時間指定により同期されたテキストトラック（字幕や歌詞データ）を埋め込みます。

<map> 利用度：★★

イメージマップ

<map>は、<area>要素と併用し、ページ内に表示させた画像などに、任意の形でのクリック可能領域（イメージマップ）を作成する際に使用します。

<area> 利用度：★★

イメージマップの形状範囲

<area>要素は、<map>で定義したイメージマップのクリック可能領域を指定する際に使用します。

テーブル（表組）Tables

<table> 利用度：★★★

テーブル・表

<table>は、行と列によって構成される表（テーブル）を作成する際に使用します。

<caption> 利用度：★★

テーブルの説明文

<caption>は、そのテーブルのキャプション（タイトル、表題）を付ける際に使用する要素です。

<colgroup> 利用度：★

列のグループ

<colgroup>は、テーブルの縦列（列、カラム）をグループ化する際に使用する要素です。<colgroup>でグループ化し一括でスタイル指定などが可能になります。

<col> 利用度：★

グループに属する列

<col>は、<colgroup>でグループ化した縦列に属する列を指定する要素です。

<tbody> 利用度：★

メインデータ行のグループ

<tbody>は、テーブルのデータ行をグループ化する要素です。

<thead> 利用度：★

ヘッダー行のグループ

<thead>は、テーブルのヘッダー行（見出し行）をグループ化する要素です。

<tfoot> 利用度：★

フッター行のグループ

<tfoot>は、テーブルのフッター行をグループ化する要素です。

<tr> 利用度：★★★

テーブルの行

<tr>は、テーブルの横一行を指定する要素です。

<td> 利用度：★★★

データセル

<td>は、テーブルのデータセルを作成する要素です。

<th> 利用度：★★★

見出しセル

<th>は、テーブルの見出しセルを作成する要素です。

フォームForms

<form> 利用度：★★★

フォーム

<form>は、テキスト入力フィールドやセレクトボックス、また送信ボタンなど、データ入力用パーツ「フォームコントロール（又は単にコントロール）」で構成され、入力されたデータの送信先などを指定するフォームを生成する要素です。

<label> 利用度：★★

ラベル

<label>は、コントロールに項目名、キャプションを付け、コントロールとキャプションの関連付けを定義する要素です。

<input> 利用度：★★★

データの入力・送信

<input>は、ユーザーによるデータ入力のパーツ（コントロール）を生成する要素で、type属性の指定により、テキスト入力ボックスや、ラジオボタン、チェックボックス、そして送信ボタンなどｍ、様々なコントロールを生成することができます。

表示例（テキストボックス）：

表示例（チェックボックス）：選択肢A選択肢B

<button> 利用度：★★

ボタン

<button>はクリック可能なボタンを生成する要素です。

<select> 利用度：★★★

セレクトボックス

<select>要素は、<option>を使い複数の選択肢のグループを生成する要素です。このコントロールは通常ドロップダウンボックスの形式で表示されます。

表示例：

<datalist> 利用度：★

入力候補

<datalist>要素は、<input>で作成したテキストボックス等で入力候補を指定しリスト化する際に使用します。<datalist>で入力候補が指定されたコントロールはクリックの際に指定しておいた入力候補がリスト表示されます。

表示例： HTML タグ検索

<optgroup> 利用度：★★

選択肢のグループ

<optgroup>は、セレクトボックスの選択肢である複数の<option>項目をグループ化する際に使用する要素です。例えば出身地を問うセレクトボックスにて「東北：秋田、岩手・・・」「関東：東京、神奈川・・・」といった分け方ができます。

表示例：

<option> 利用度：★★★

選択肢

<option>要素は、<select>（セレクトボックス）の子要素として使用され、選択肢の記述に利用されます。また<datalist>の選択肢としても利用できます。

<textarea> 利用度：★★★

複数行のテキスト入力

<textarea>は、複数行のテキスト入力欄を作成します。
1行のテキストであれば<input>にtype="text"の属性を付与したテキストボックスも利用できます。

<output> 利用度：☆

計算結果

<output>は、フォームで行った計算結果やユーザー操作による結果を格納するための要素です。

<progress> 利用度：☆

進捗状況

<progress>は、タスク完了までの進捗状況を示す際に利用する要素です。通常、いわゆるプログレスバーとして表示されます。

表示例(70%時)：

表示例(実行中等)：

<meter> 利用度：☆

メーター

<meter>予め下限上限が分かっている既知の範囲内の測定値を表す要素です。例えば、容量の残量や、投票の得票数などが考えられます。

表示例：

<fieldset> 利用度：★★

フォームコントロールのグループ

<fieldset>は、複数入力項目（フォームコントロール）をグループ化する要素です。

表示例：

HTML CSS Javascript

<legend> 利用度：★★

グループの見出し

<legend>要素は、上記の<fieldset>でグループ化した項目のキャプション（タイトル/説明）を表示します。

表示例：

何を学びますか？ HTML CSS Javascript

インタラクティブ要素Intaravtive Elements

<details> 利用度：★☆

折り畳み式の付加情報

<details>要素は、折り畳み式のボックスをクリックすることで記した付加情報、詳細を表示させる事ができます。
下記の<summary>要素を併用することでキャプションを追加することもできます。

表示例：

ここにドロップダウン方式で詳細情報が表示されます。
この要素は注釈や脚注を表示する際に使用するべきではないとされています。
また、本来、付加情報を記載する要素ですので、単純にアコーディオンメニューのようなOpen/Closeを表現するために利用することには議論の余地があるように思います。
※IEやEdgeなどでは対応しておらず最初から全て表示されてしまいます。

<summary> 利用度：★☆

詳細のキャプション

<summary>要素は、<details>要素の見出しを表示する際に使用します。
<summary>を使用しない場合、見出しとして「詳細」「Details」等が自動付与されます。

表示例：

smells-like-teen-spilits.mp3

曲名：: Smells Like Teen Spilits
アーティスト：: ニルヴァーナ
収録アルバム：: ネヴァーマインド
リリース：: 1991年

<dialog> 利用度：☆

ダイアログボックス

<dialog>は、ダイアログボックス、インスペクターやウィンドウを表示させるための要素です。
少し厳密に言うならセマンティクス上あくまで、そのコンテンツがダイアログであることを定義する要素であり、モーダルウィンドウやポップアップウィンドウを簡単に作るための要素ではありません。

スクリプト要素Scripting

<script> 利用度：★★★

スクリプト

<script>要素は、Javascripなどのスクリプトコードの記述や外部スクリプトの参照。またデータブロックの記述に使用します。

<noscript> 利用度：★★

スクリプトが対応していない環境用の記述

<noscript>要素は、スクリプトが対応していない環境用の記述をする際に使用します。
<noscript>Javascriptを使用しています。</noscript>
のように記述します。noscriptに記述した内容は、、スクリプトが動作する環境では表示されません。

<template> 利用度：☆

テンプレート

<template>要素は、テンプレートとしてHTMLソースを格納しておき、Javascriptを使用し、ページのコンテンツ内に繰り返し読み込む事ができます。
<template>要素自体は、そのままでは何も描画することは無く、Javascriptでコンテンツに読み込むことで描画可能になります。

<slot> 利用度：☆