カテゴリー

キーワード

 
> HTML5要素のカテゴリーを押さ...

HTML5要素のカテゴリーを押さえましょう


2015 年 2 月 12 日 投稿    view: 4751
タグ:
このエントリーをはてなブックマークに追加

こんにちは。
WEBマーケティング部の杉尾成行です。

今日は「HTML5要素のカテゴリー」についてお話しさせていただきます。

HTML5要素のカテゴリー

HTML5のタグの大部分がこれからお話しする7つのカテゴリーに含まれます。

ですが、これらのタグがどこに属しているか全てを把握する必要はありません
特に、HTMLコーディング初心者の方は以下の話にとらわれることなく、「こういうものがあるんだな」と何となく見ていただくだけで構いません。
実際にコーディングを記述してみて上手くいかない場合、「もしかしたらあの決まりに反しているからかな」と思って、この記事とコンテンツ・モデルに関する記事を再びご覧いただくというくらいの感じでいいと思います。

それを念頭において、下図をご覧ください。
7つの主要なカテゴリーを表したものです。


重なっている部分があるのは複数のカテゴリーを持つ要素があるということです。


それぞれの要素にはどの要素を含めてよいかコンテンツ・モデルによって決められています。

コンテンツ・モデルとは、どの要素(タグ)にどんなもの(コンテンツ)を入れていいか定義したものです。
コンテンツ・モデルについては次回、お話しさせていただきます。


上図以外にもカテゴリーがいくつかあります。
それも含めて、順に紹介したいと思います。

主要な7つのカテゴリー

フロー・コンテンツ

ブラウザ画面に表示するコンテンツを構成する要素です。
HTML4.01とXHTML1.0におけるブロック要素とインライン要素はこの中に含まれると考えて大丈夫です。
従来のブロック要素に近いのは、次項で紹介するフレージング・コンテンツ【ではない】フロー・コンテンツです。


a abbr address article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea 
time u ul var video wbr テキスト


※特定の条件が満たされている場合のみフローコンテンツに属する要素がいくつか存在します。
・<map>~</map> 要素内にある <area>~</area>
・scoped 属性が指定された <style>~</style>


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

テキストを構成する要素です。
HTML4.01とXHTML1.0におけるインライン要素はここに含まれると考えて大丈夫です。

「さっきインライン要素はフロー・コンテンツに含まれるって書いていたけど…」と思われた方は、再度上の図をご覧ください。
フレージング・コンテンツはフロー・コンテンツに含まれています。


 a abbr 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 math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr テキスト



※特定の条件が満たされている場合のみフレージング・コンテンツに属する要素がいくつか存在します。
・フレージング・コンテンツのみを含む<a>~</a>
・<map>~</map> 要素内にある <area>~</area>



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

セクションを構成する要素です。


※セクションとはページの構造体のことです。
ナビゲーションを意味する<nav>や、単独で完結したコンテンツを示す<article>がここに含まれます。

article aside nav section


ヘディング・コンテンツ

見出しを構成する要素です。


h1 h2 h3 h4 h5 h6

※当初ここに含まれていたhgroupは廃止となりました


エンベデッド・コンテンツ

画像や動画などを埋め込む際に使う要素です。

audio canvas embed iframe img math object svg video

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

ページに訪問したユーザーが操作する、リンクやフォームなどを構成する要素です。


a audio (controls 属性が存在する場合)  button embed iframe img (usemap属性が存在する場合) input (type 属性が hidden 状態でない場合)  keygen label object (usemap 属性が存在する場合)  select textarea video (controls 属性が存在する場合)


メタデータ・コンテンツ

ページに関する情報(メタデータ)を挿入するための要素です。

 base link meta noscript script style template title

 

上記7種類以外のカテゴリー

フォーム関連の要素

フォーム関連の入力項目やラベル、ボタンなどを構成する要素です。

button fieldset input keygen label meter object output progress select textarea

 

セクショニング・ルート

文書のツリー構造(アウトライン)の最上位階層を構成する要素です。

blockquote body details fieldset figure td

 

カテゴリーに属していない要素

どのカテゴリーにも属していない要素です。
こうした要素の多くはtable ulといった他の要素内で使用するものとなっています。

caption colgroup col dt dd figcaption head html li tbody thead tfoot tr thなど

 

まとめ

本日はHTML5要素のカテゴリーについて説明させていただきました。

次回はコンテンツ・モデルについてお話しさせていただきます。


最後までお読みいただきありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事