【HTML】カテゴリとコンテンツモデル

## はじめに
　プログラミングをする上でHTMLの基礎知識について理解する。

## 目次
* カテゴリ
  * [メタデータコンテンツ](#メタデータコンテンツ)
  * [フローコンテンツ](#フローコンテンツ)
  * [セクショニングコンテンツ](#セクショニングコンテンツ)
  * [ヘディングコンテンツ](#ヘディングコンテンツ)
  * [フレージングコンテンツ](#フレージングコンテンツ)
  * [エンべディッドコンテンツ](#エンべディッドコンテンツ)
  * [インタラクティブコンテンツ](#インタラクティブコンテンツ)

* コンテンツモデル
  * [トランスペアレントコンテンツ](#トランスペアレントコンテンツ)

## カテゴリ
### メタデータコンテンツ
　文書内のコンテンツの表示や動作を指定したり、ドキュメントの関連性を指定したり、文書のメタ情報などを指定したりする要素。
 
base、link、meta、noscript、script、style、template、title要素が該当する。

### フローコンテンツ
　body要素内で使われるほとんどの要素は「フローコンテンツ」に分類される。

a、abbr、address、area、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、command、data、datalist、del、details、dfn、dialog、div、dl、embed、em、fieldset、figure、footer、form、h1〜h6、header、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、main、map、mark、menu、meter、nav、noscript、ol、output、p、picture、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、sub、sup、table、template、textarea、time、u、ul、var、video、wbr要素が該当する。

### セクショニングコンテンツ
　明示的にアウトラインを生成する要素。各セクショニングコンテンツは通常、見出しを伴って使用される。

article、aside、nav、section要素が該当する。

### ヘディングコンテンツ
　セクションの見出しを定義する要素。また、暗黙的にアウトラインを生成する。

h1、h2、h3、h4、h5、h6要素が該当する。

### フレージングコンテンツ
　文書を構成するテキストを表す要素。従来のHTMLでインライン要素と呼ばれていた分類に相当する。

a、abbr、area、audio、b、bdi、bdo、br、button、canvas、cite、code、command、data、datalist、del、dfn、embed、em、i、iframe、img、input、ins、kbd、keygen、label、map、mark、meter、noscript、object、output、progress、q、ruby、s、samp、script、select、small、span、strong、sub、sup、textarea、time、u、var、video、wbr、picture、templatey要素が該当する。

### エンべディッドコンテンツ
　文書に他のリソースなどを埋め込む要素。

audio、canvas、embed、iframe、img、object、video、picture要素が該当する。

### インタラクティブコンテンツ
　閲覧者が操作する要素。

a、audio、button、details、embed、iframe、img、input、keygen、label、menu、object、select、textarea、video要素が該当する。

### その他
### セクショニングルート
　独自のアウトラインを形成する要素です。ただし、セクショニングコンテンツと異なり、文書全体のアウトラインには影響を与えない。

body、blockquote、details、fieldset、figure、td要素が該当する。

### パルパブルコンテンツ
　コンテンツモデルがフローコンテンツ、もしくはフレージングコンテンツとなる要素は「パルパブルコンテンツ」となる。パルパブルコンテンツに分類される要素は、hidden属性が指定されていない内容を最低でも1つは持つ必要がありる。

a、abbr、address、article、aside、audio、b、bdi、bdo、blockquote、button、canvas、cite、code、data、details、dfn、div、dl、embed、em、fieldset、figure、footer、form、h1〜h6、header、hgroup、i、iframe、img、input、ins、kbd、keygen、label、main、map、mark、menu、meter、nav、object、ol、output、p、pre、progress、q、ruby、s、samp、section、select、small、span、strong、sub、sup、table、textarea、time、u、ul、var、video要素が該当する。

### スクリプト支援要素
　要素自体は何も表さず、スクリプトを操作するために利用される要素。

script、template要素が該当する。

## 置換要素と非置換要素
### 置換要素
　要素の内容が画像やアプリケーションなどの挿入されたコンテンツに置き換えられる要素は「置換要素」に分類される。

img、audio、video、embed、iframe、object、canvas要素やフォーム関連要素などが該当する。

### 非変換要素
 置換要素に分類されない要素は「非置換要素」に分類される。非置換要素は、要素の内容となる文字などのデータがWebページにそのまま表示される。

## コンテンツモデル
ある要素がどの要素を内容として持つことができるか、つまり子要素とできるかというルールを表す。例えば、コンテンツモデルが「フローコンテンツ」のaside要素は、フローコンテンツに属するp要素などを内容として持てる。フローコンテンツに属していないlink要素などを内容として持つことはできない。

また、audio要素のように、属性と属性値の指定によってコンテンツモデルが変化する要素も存在する。なお、空要素のコンテンツモデルは「空」になる。

### トランスペアレントコンテンツ
a、audio、canvas、del、ins、map、noscript、video要素は、コンテンツモデルが「トランスペアレントコンテンツ」となっており、親要素のコンテンツモデルを受け継ぐ要素。例えば、親要素にaside要素を持つa要素は、aside要素のコンテンツモデルがフローコンテンツなので、コンテンツモデルを受け継ぎ、フローコンテンツを内容に持つことができる。








## 参考サイト
[できるネット](https://dekiru.net/article/12894/)

## 最後に
間違っている点がありましたらご指摘お願いします。