column

ITコラム

colmun_main1871

プログラミングノウハウ

2017.01.11

HTML5【 カテゴリ 】~7つのカテゴリ

HTML5より前は、要素をブロック要素、インライン要素、その他などと分類して、インライン要素の中にブロック要素は置かない等のルールがありましたが、HTML5ではブロック要素やインライン要素という考え方が無くなり、各要素はおおよそ7つのカテゴリに分類されるようになりました。
今回は、そのカテゴリについてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 7つのカテゴリ

HTML要素のカテゴリは7つあります。

メタデータ・コンテンツ Metadata content

HTMLの情報や、外部ファイル読み込み、CSSやスクリプトの指定など、文書情報や別文書との関係などを定義するコンテンツです。

このカテゴリに属する要素
<base>
<link>
<meta>
<noscript>
<script>
<style>
<template>
<title>

 


フロー・コンテンツ Flow content

文書の本体に現れる一般的なコンテンツで、ほとんどの要素がこのコンテンツに含まれます。フローコンテンツ + カテゴリに属さない要素(sectioning rootsの一部を含む) + メタデータ・コンテンツの一部ですべての要素になります。

このカテゴリに属する要素
<a>  <abbr>  <address>
<area>(map要素内にある場合)
<article>  <aside>  <audio>
<b>  <bdi>  <bdo>
<blockquote>  <br>  <button>
<canvas>  <cite>  <code>
<data>  <datalist>  <del>
<details>  <dfn>  <div>
<dl>  <em>  <embed>
<fieldset>  <figure>  <footer>
<form>  <h1>-<h6>  <header>
<hr>  <i>  <iframe>  <img>
<input>  <ins>  <kbd>  <keygen>
<label>  <main>  <map>  <mark>
<menu>  <meter>  <nav>  <noscript>
<object>  <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>  テキスト

 


ヘディング・コンテンツ Heading content

見出し(ヘディング)と、それをまとめるコンテンツです。

このカテゴリに属する要素
<h1> ~ <h6>

 


セクショニング・コンテンツ Sectioning content

見出しとその内容(セクション)をまとめるコンテンツです。

このカテゴリに属する要素
<article>
<aside>
<nav>
<section>

 


フレージング・コンテンツ Phrasing content

段落内で使用するような、テキスト(フレーズ)に関わるコンテンツです。

このカテゴリに属する要素
<a>  <abbr>  <area>(map要素内にある場合)
<audio>  <b>  <bdi>  <bdo>
<br>  <button>  <canvas>  <cite>
<code>  <data>  <datalist>  <del>
<dfn>  <em>  <embed>  <i>
<iframe>  <img>  <input>  <ins>
<kbd>  <keygen>  <label>  <map>
<mark>  <meter>  <noscript>  <object>
<output>  <picture> <progress>  <q>
<ruby>  <s>  <samp>  <script>
<select>  <small>  <span>  <strong>
<sub>  <sup>  <template>  <textarea>
<time>  <u>  <var>  <video>
<wbr>  テキスト

 


エンベッディド・コンテンツ Embedded content

文書内に埋め込みを行うコンテンツです。画像、音、ビデオ、他のHTMLなどを読み込みます。

このカテゴリに属する要素
<audio>
<canvas>
<embed>
<iframe>
<img>
<object>
<picture>
<video>

 


インタラクティブ・コンテンツ Interactive content

ユーザーが操作可能なコンテンツです。クリックやキーボード操作で変化するコンテンツのためのものです。

このカテゴリに属する要素
<a> (HTML 5.1ではhref属性がある場合に限る)
<audio> (controls属性がある場合)
<button>
<details>
<embed>
<iframe>
<img> (usemap属性がある場合)
<input> (type=”hidden”の場合は除く)
<keygen>
<label>
<object> (usemap属性がある場合)
<select>
<textarea>
<video> (controls属性がある場合)

また、上の7つとは別に「セクショニング・ルート」という特別な要素があります。
セクショニング・ルート(Sectioning roots)とは、自分の中に独立したセクションを持つことができる要素のことです。自分がセクションのルートになれる要素です。

▲目次へ戻る

2. 各カテゴリの関係

各カテゴリは、下の図のように関連しています。
 
HTML5 カテゴリ 7つのカテゴリ プログラマカレッジ

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ