SYNCER

SYNCER

要素のカテゴリー

公開日:

HTMLの要素(タグ)の分類をまとめています。この分類は各要素の性質を反映していて、複数のカテゴリに属する要素も少なくありません。検定試験か何かを受けるでもない限り、特に覚える必要はありません。「〜の要素はPhrasing contentに属する要素だけを内包できる」というような説明を見かけた時に確認すればいいでしょう。

Metadata content

メタデータをマークアップする要素です。

<base>、 <link>、 <meta>、 <noscript>、 <script>、 <style>、 <template>、 <title>

仕様書: https://html.spec.whatwg.org/multipage/dom.html#metadata-content

Flow content

テキストや埋め込みコンテンツ全般を含みます。

<a>、 <abbr>、 <address>、 <area>、 <article>、 <aside>、 <audio>、 <b>、 <bdi>、 <bdo>、 <blockquote>、 <br>、 <button>、 <canvas>、 <cite>、 <code>、 <data>、 <datalist>、 <del>、 <details>、 <dfn>、 <dialog>、 <div>、 <dl>、 <em>、 <embed>、 <fieldset>、 <figure>、 <footer>、 <form>、 <h1>、 <h2>、 <h3>、 <h4>、 <h5>、 <h6>、 <header>、 <hgroup>、 <hr>、 <i>、 <iframe>、 <img>、 <input>、 <ins>、 <kbd>、 <label>、 <link>、 <main>、 <map>、 <mark>、 <menu>、 <meta>、 <meter>、 <nav>、 <noscript>、 <object>、 <ol>、 <output>、 <p>、 <picture>、 <pre>、 <progress>、 <q>、 <ruby>、 <s>、 <samp>、 <script>、 <section>、 <select>、 <slot>、 <small>、 <span>、 <strong>、 <sub>、 <sup>、 <table>、 <template>、 <textarea>、 <time>、 <u>、 <ul>、 <var>、 <video>、 <wbr>

仕様書: https://html.spec.whatwg.org/multipage/dom.html#flow-content

Sectioning content

ドキュメントのアウトラインを構築するための要素です。

<article>、 <aside>、 <blockquote>、 <body>、 <details>、 <dialog>、 <fieldset>、 <figure>、 <nav>、 <section>、 <td>

仕様書: https://html.spec.whatwg.org/multipage/dom.html#sectioning-content

Heading content

見出しに関連する要素です。

<h1>、 <h2>、 <h3>、 <h4>、 <h5>、 <h6>、 <hgroup>

仕様書: https://html.spec.whatwg.org/multipage/dom.html#heading-content

Phrasing content

テキストそのもの、及び、主にテキストをマークアップするための要素です。

<a>、 <abbr>、 <area>、 <audio>、 <b>、 <bdi>、 <bdo>、 <br>、 <button>、 <canvas>、 <cite>、 <code>、 <data>、 <datalist>、 <del>、 <dfn>、 <em>、 <embed>、 <i>、 <iframe>、 <img>、 <input>、 <ins>、 <kbd>、 <label>、 <link>、 <map>、 <mark>、 <meter>、 <noscript>、 <object>、 <output>、 <picture>、 <progress>、 <q>、 <ruby>、 <s>、 <samp>、 <script>、 <select>、 <slot>、 <small>、 <span>、 <strong>、 <sub>、 <sup>、 <template>、 <textarea>、 <time>、 <u>、 <var>、 <video>、 <wbr>

  • <area> (map属性の祖先である場合のみ)
  • <link> (body要素の子孫になれる場合のみ)
  • <meta> (itemprop属性がある場合のみ)

仕様書: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content

Embedded content

画像や音声など、ドキュメントの外部にあるリソースを取り込んで表示する、埋め込みコンテンツです。

<audio>、 <canvas>、 <embed>、 <iframe>、 <img>、 <object>、 <picture>、 <video>

仕様書: https://html.spec.whatwg.org/multipage/dom.html#embedded-content-2

Interactive content

ユーザーの操作を受け付ける要素です。tabindex属性は、任意の要素をInteractive contentにします。

<a>、 <audio>、 <button>、 <details>、 <embed>、 <iframe>、 <img>、 <input>、 <label>、 <object>、 <select>、 <textarea>、 <video>

  • <a> (href属性がある場合のみ)
  • <audio> (controls属性がある場合のみ)
  • <video> (controls属性がある場合のみ)
  • <img> (usemap属性がある場合のみ)
  • <object> (usemap属性がある場合のみ)
  • <input> (type属性がhiddenじゃない場合のみ)

仕様書: https://html.spec.whatwg.org/multipage/dom.html#interactive-content

Palpable content

コンテンツモデルがFlow content、またはPhrasing contentの要素。このカテゴリの要素は、hidden属性が付いてなく、かつ、内容(子ノード)がある要素を1つ以上持つことが求められる。ただし、このルールは厳密ではない。例えば、後からJavaScriptを使って内容を入れる予定で、空のa要素を配置することは許される。

<a>、 <abbr>、 <address>、 <article>、 <aside>、 <audio>、 <b>、 <bdi>、 <bdo>、 <blockquote>、 <button>、 <canvas>、 <cite>、 <code>、 <data>、 <details>、 <dfn>、 <div>、 <dl>、 <em>、 <embed>、 <fieldset>、 <figure>、 <footer>、 <form>、 <h1>、 <h2>、 <h3>、 <h4>、 <h5>、 <h6>、 <header>、 <hgroup>、 <i>、 <iframe>、 <img>、 <input>、 <ins>、 <kbd>、 <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>

  • <audio>: controls属性がある場合のみ。
  • <dl>: 子要素に1つ以上、dt要素とdl要素のペアが含まれている場合のみ。
  • <input>: type属性がhiddenじゃない場合のみ。
  • <menu>: type属性がtoolbarの場合のみ。
  • <ol>: 子要素に1つ以上のli要素を持つ場合のみ。
  • <ul>: 子要素に1つ以上のli要素を持つ場合のみ。

仕様書: https://html.spec.whatwg.org/multipage/dom.html#palpable-content

Form-associated element

フォーム関連のコンテンツです。

<button>、 <fieldset>、 <img>、 <input>、 <object>、 <output>、 <select>、 <textarea>

仕様書: https://html.spec.whatwg.org/multipage/forms.html#form-associated-element

Labelable element

label要素に関連付けられる要素です。

<button>、 <input>、 <meter>、 <output>、 <progress>、 <select>、 <textarea>

仕様書: https://html.spec.whatwg.org/multipage/forms.html#category-label

Script-supporting element

スクリプトをサポートするコンテンツです。

<script>、 <template>

仕様書: https://html.spec.whatwg.org/multipage/dom.html#script-supporting-elements