2022.07.27
【カメラ初心者向け】物撮りが上手くなるコツ ～食べ物編～
その他
制作
2021.11.09
コーディングをする中で必ずと言ってもいいほど触れるHTML。
その中でも最近一番よく耳にするのはHTML5ではないでしょうか？
よく耳にするものの、実際どんな要素があるのかを把握するのは難しいですよね…。
今回はそんなHTML5にはどんな要素があるのか、全要素をまとめてみました！
目次
そもそもHTML5とはWebページの内容を書くための基本の言語、HTML（Hyper Text Markup Language）のバージョン5ということを指しています。
1993年ごろに初期のHTML1が開発されてからバージョンアップを繰り返し、2014年10月に発表された今の最新バージョンがHTML5なのです。
今回の本題、HTML5で使える全ての要素をアルファベット順でまとめてみました。
新しく追加された要素や、使い方が変更された要素もあるため、かなりの量があります…！
テキストが水色になっている要素は別の記事で詳しい使い方を解説していますので、合わせて見てみてください！
| 要素名 | 意味 | カテゴリー |
| a | ハイパーリンク | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| abbr | 略語 | フローコンテンツ フレージングコンテンツ |
| address | 問い合わせ先 | フローコンテンツ |
| area | イメージマップの領域を定義 | フローコンテンツ フレージングコンテンツ |
| article | 完結している記事セクション | フローコンテンツ セクショニングコンテンツ |
| aside | 本題ではない内容のセクション | フローコンテンツ セクショニングコンテンツ |
| audio | 音声の再生 | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ インタラクティブコンテンツ |
| b | 目立たせたいキーワード | フローコンテンツ フレージングコンテンツ |
| base | 相対パスの基準とするURL | メタデータコンテンツ |
| bdi | 文字表記の方向の影響を周囲に与えない範囲 | フローコンテンツ フレージングコンテンツ |
| bdo | 文字表記の方向 | フローコンテンツ フレージングコンテンツ |
| blockquote | 引用されたコンテンツ （ブロックレベル） | フローコンテンツ |
| body | HTML文章全体を入れる要素 | |
| br | 改行 | フローコンテンツ フレージングコンテンツ |
| button | ボタン | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| canvas | スクリプトによるビットマップの動的グラフィック | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ |
| caption | table要素に対するキャプション | |
| cite | 出典 | フローコンテンツ フレージングコンテンツ |
| code | ソースコードの一部 | フローコンテンツ フレージングコンテンツ |
| col | 表の縦列 | |
| colgroup | 表の縦列のグループ | |
| data | 機械読み取りが可能な属性値付きのコンテンツ | フローコンテンツ フレージングコンテンツ |
| datalist | input要素の選択肢となるoption要素を含む要素 | フローコンテンツ フレージングコンテンツ |
| dd | dl要素内の「説明文」 | |
| del | あとから削除された部分 | フローコンテンツ フレージングコンテンツ |
| details | ディスクロージャーウィジェット | フローコンテンツ インタラクティブコンテンツ |
| dfn | 定義の対象となっている要素 | フローコンテンツ フレージングコンテンツ |
| div | 汎用ブロックレベル要素 | フローコンテンツ |
| dl | 用語と説明文が対になったリスト | フローコンテンツ |
| dt | dl要素内の「用語」 | |
| em | 強調されている部分 | フローコンテンツ フレージングコンテンツ |
| embed | プラグインによる外部データの読み込み | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ インタラクティブコンテンツ |
| fieldset | フォーム部分のグループ | フローコンテンツ |
| figcaption | figure要素のキャプション | |
| figure | 図やイラスト（図版） | フローコンテンツ |
| footer | フッターのセクション | フローコンテンツ |
| form | フォーム | フローコンテンツ |
| h1〜h6 | セクションの見出し | フローコンテンツ 見出しコンテンツ |
| head | HTML文章のメタデータを入れる要素 | |
| header | ヘッダーのセクション | フローコンテンツ |
| hr | 段落レベルでの主題の変わり目 | フローコンテンツ |
| html | HTML文章全体を含む要素 （ルート要素） | |
| i | 普通のテキストとは異なる部分 | フローコンテンツ フレージングコンテンツ |
| iframe | インライン・フレーム | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ インタラクティブコンテンツ |
| img | 画像 | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ インタラクティブコンテンツ |
| input | フォームの様々な基本部分になる要素 | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| ins | あとから挿入された部分 | フローコンテンツ フレージングコンテンツ |
| kbd | ユーザーが入力するデータ | フローコンテンツ フレージングコンテンツ |
| keygen | 公開鍵・秘密鍵のペアを生成するフォーム部分 | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| label | フォーム部分に関連付けられたデータ | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| legend | fieldset要素のキャプション | |
| li | リストの項目 | |
| link | HTML文章とファイルを関連付ける | メタデータコンテンツ |
| main | メインのコンテンツ | フローコンテンツ |
| map | イメージマップの定義 | フローコンテンツ フレージングコンテンツ |
| mark | 参照目的で目立たせている部分 | フローコンテンツ フレージングコンテンツ |
| menu | コンテキストメニュー | フローコンテンツ |
| menuitem | コンテキストメニューの項目 | |
| meta | メタデータ | メタデータコンテンツ |
| meter | メーター（特定の範囲内での位置を示す） | フローコンテンツ フレージングコンテンツ |
| nav | 主要なナビゲーションのセクション | フローコンテンツ セクショニングコンテンツ |
| noscript | スクリプトが動作しない環境向けの内容 | フローコンテンツ フレージングコンテンツ メタデータコンテンツ |
| object | 様々な形式の外部データの組み込み | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ |
| ol | 連番付きのリスト | フローコンテンツ |
| optgroup | option要素のグループ | |
| option | select要素またはdatalist要素の選択肢 | |
| output | 計算結果を出力するためのフォーム部品 | フローコンテンツ フレージングコンテンツ |
| p | 段落 | フローコンテンツ |
| param | object要素で使うプラグインのパラメータ | |
| picture | 複数の候補画像を含む要素 | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ |
| pre | 整形済みテキスト | フローコンテンツ |
| progress | プログレスバー | フローコンテンツ フレージングコンテンツ |
| q | 引用されたコンテンツ | フローコンテンツ フレージングコンテンツ |
| rb | ルビをふる大将のテキスト | |
| rp | ルビに未対応の環境で使用するかっこ | |
| rt | ルビとして表示させるテキスト | |
| rtc | rt要素のグループ | |
| ruby | ルビ関連要素全体を含む要素 | フローコンテンツ フレージングコンテンツ |
| s | 正しい情報ではなくなった部分や関係なくなった部分 | フローコンテンツ フレージングコンテンツ |
| samp | コンピュータの出力サンプル | フローコンテンツ フレージングコンテンツ |
| script | スクリプト | フローコンテンツ フレージングコンテンツ メタデータコンテンツ |
| section | 一般的なセクション | フローコンテンツ セクショニングコンテンツ |
| select | 選択肢の中から選ぶ形式のフォーム部分 | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| small | 補足情報的な注記 | フローコンテンツ フレージングコンテンツ |
| source | 画像・動画・音声の候補データ | |
| span | 汎用インライン要素 | フローコンテンツ フレージングコンテンツ |
| strong | 重要な部分 | フローコンテンツ フレージングコンテンツ |
| style | スタイルシート | メタデータコンテンツ |
| sub | 下付き文字 | フローコンテンツ フレージングコンテンツ |
| summary | ディスクロージャーウィジェットの見出し | |
| sup | 上付き文字 | フローコンテンツ フレージングコンテンツ |
| table | 表 | フローコンテンツ |
| tbody | 表全体の横列グループ | |
| td | 表の内容のセル | |
| template | 内容をスクリプトで生成する部分 | フローコンテンツ フレージングコンテンツ メタデータコンテンツ |
| textarea | 複数行のテキスト入力欄 | フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ |
| tfoot | 表のフッター横列のグループ | |
| th | 表の見出しのセル | |
| thead | 表のヘッダー横列のグループ | |
| time | 機械読み取りが可能な日付・時間 | フローコンテンツ フレージングコンテンツ |
| title | HTML文書のタイトル | メタデータコンテンツ |
| tr | 表の横一列 | |
| track | 字幕などのテキスト・トラック | |
| u | 中国語の固有名詞やスペルミスの箇所など | フローコンテンツ フレージングコンテンツ |
| ul | 箇条書きリスト | フローコンテンツ |
| var | 変数 | フローコンテンツ フレージングコンテンツ |
| video | 動画 | フローコンテンツ フレージングコンテンツ 組み込みコンテンツ インタラクティブコンテンツ |
| wbr | 英単語などの途中で行を折り返しても良い位置 | フローコンテンツ フレージングコンテンツ |
表の一番右の「カテゴリー」欄は、HTML5から定義された分類カテゴリーのどれに当たるかをまとめています。
HTML5よりも前は文章の一部分として含むことのできるインライン要素とインライン要素のまとまった単位であるブロックレベル要素の2種類に分類されていましたが、HTML5からは従来の分類が廃止され、関連性を持つ7つのカテゴリーが定義されるようになりました。
ブロックレベル要素とインライン要素についてはこちら
これまではブロックレベル要素以外をbody要素直下に配置することは基本的にできませんでしたが、HTML5からは従来のインライン要素に該当する要素もbody要素直下に配置することができるように変わっています。
メタデータコンテンツとは、文章内のコンテンツの表示や動作を指定したり、ドキュメントの関連性を指定することや、名前の通り文章のメタ情報を指定するための要素です。
HTMLを書き始める時にまずhead要素内に書くようなlink、meta、script、style、titleなどがこれに該当します。
フローコンテンツとは、body要素内で使われるほとんどの要素を指しています。
「特定の要素内にしか配置できない要素」（dl要素内にしか配置できないdt要素）のような制限がなく自由に配置できる要素がフローコンテンツに当たります。
セクショニングコンテンツとは、nav、section要素のようにアウトラインを生成するための要素です。
セクショニングコンテンツは基本的に内容に見出しを持つ状態で使用されます。
見出しコンテンツ（ヘディングコンテンツ）とは、名前の通り見出しを定義するための要素です。h1〜h6要素のみが該当し、基本的に親要素にセクショニングコンテンツを持った状態で使用されることが多いです。
フレージングコンテンツとは、文章を構成するテキストを表す要素です。
従来のHTMLではインライン要素と呼ばれていた要素がこの分類に該当します。
組み込みコンテンツ（エンベディッドコンテンツ）とは、文章内に他のリソースなどを埋め込む要素です。
例えば、動画を埋め込むためのvideo要素、画像を埋め込むためのimg要素などがこれに該当します。
インタラクティブコンテンツとは、閲覧者が操作する部分に使われる要素です。
フォームのコンテンツになるinput、textarea、button要素や、リンクとなるa要素などがこれに該当します。
「コンテンツ・モデル」といきなり言われてもよくわからないと思いますが、難しいことではありません。
コンテンツ・モデルとは、ある要素がどの要素を持つことができるか＝子要素として持つことができるかというルールのことを指しています。
例えば、コンテンツ・モデルが「フローコンテンツ」のsection要素はフローコンテンツに属しているp要素を持つことができますが、フローコンテンツに属していないlink要素を持つことはできません。
また、要素に入っている全体を指すのではなく、直接入れられている子要素のみを指しているため孫要素などはこれには当たりません。
特定の要素はトランスペアレントコンテンツと呼ばれ、親要素のコンテンツ・モデルを受け継ぐことができます。
例えば、親要素にsection要素を持つa要素は、親要素のコンテンツ・モデルを受け継ぎフローコンテンツを内容に持つことができるのです。
トランスペアレントコンテンツには以下の要素が該当します。
使う機会が少なくて意外と知らない要素も多いHTML5。
正しく使うことでマークアップの質が上がるので、ぜひ使いやすい要素から使ってみてください！
こちらもおすすめ
この記事をシェアする
株式会社スピカデザイン
https://spiqa.design/
spiqa_design