原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

コンテンツモデルを眺めるための図

コンテンツモデル

このページのコンテンツモデルについて

HTML5の解説サイトが増えてきた頃に、コンテンツモデルの図(青っぽい丸い円で要素カテゴリーの関係を図示したもの)がいろんなサイトに貼られてましたが、その図とそこに含まれるタグを図示してみたコンテンツとなっています。初期制作時の図とタグの配置はMDNが新しいレイアウトになる前のものですが、タグの詳細情報は一応、2017年にチェックして更新しています。

略語メモ

説明メモ文の中では、フローコンテンツをFl、フレージングコンテンツをPh等と、勝手に略してます。

図に見出しはありますが、図中では特にどれが「パルパブル・コンテンツ」かは示していません。

図ではトランスペアレント・コンテントモデルは赤色(#600)、セクショニングルートは青色(#006)にしています。

その他メモ

hgroup要素
ドキュメントのセクションの複数レベルのヘッダーを表す。
★HTML5 (W3C) 仕様から削除された。WHATWG 版の HTML には依然として含まれている。ほとんどのブラウザで部分的に実装され、実装が削除される可能性が低くなっている。HTML5 (W3C) 仕様書では、hgroup を使用せず 副見出し、サブタイトル、代替タイトル、スローガン をマークアップする方法についてアドバイスを提供。

data要素
機械可読な形式で提供する。内容がtime-かdate-relatedの場合、time要素を利用
という説明自体が意味不明。どうやらvalue属性に機械で読み取り可能な値を記述し、画面にdata要素で表示(の意味がわからないけど…)というものらしいが、文法的に使い方が分からない。また、各ブラウザで未サポート状態。※FF22.0(バグ有り?)以外のブラウザでは未サポート

rtc要素
ruby要素の子として使う。 ルビテキストの集まりを指し、1つのテキストに、複数のルビを適用する場合に使用。
※FF33以外のブラウザでは未サポート

s要素 , strike要素
s要素は、打ち消し要素(テキストの削除とは別の抹消を表す)。
その範囲のテキストが既に正確でなくなった事を表す為に用いるが、編集箇所を伝える用途の場合には del(データ削除を示す) と ins(テキストへの挿入を示す) が適している。
strike要素は打消し線要素(表示スタイルのためだけのもの)で、sと同じもの。HTML5で廃止された。

menuitem要素
HTMLの menuitem 要素 は、ユーザがポップアップメニュから実行できるコマンドを表す。メニューボタンに割り当てるメニュー、コンテキストメニューも含む。20170925現在実験段階。ほとんどのブラウザで未サポート。
MDNの説明

summary要素
20170925現在、カテゴリがなしからフレージングコンテンツになっている。
MDNの説明
※親の details が2017年9月現在で Edge IE11 IE10 等で未対応となっているので、summary も使えない状態です。

top > HTML5研究

a 要素概要

ハイパーリンクやハイパーリンクからジャンプする名前付きのページ内ターゲット等を指定。

※フレージングコンテンツだけを含む場合はPh。

HTML5から、download 属性。
URLに移動ではなくダウンロードするようブラウザーへ示し、ローカルファイルとして保存することを促すもの。属性に値を指定した場合、保存プロンプトのデフォルトのファイル名として解釈
MDNの解説
※IEでは未サポート(20170829現在)

テクニックとして、href属性に「javascript:void(0);」(リターン値がundefinedになり、リンククリック無効化される)を指定し、onclick属性でjavascriptの関数を指定する等がある。

このテクニックがwebの黎明期には「IE」の仕様対応で、hrefに「#」を指定し、いちいちページトップに遷移されていたのが懐かしい思い出。

今でもonclick属性の最後に「return false;」を付ける癖があるのはこれまた過去の「IE」の仕様対応のなごり。

abbr 要素概要

略語と、また任意でその略語の完全な説明

略語の説明は title 属性にすべて含める

例「W3C」を abbr 要素で略称と意味づける。
<abbr title="World Wide Web Consortium">W3C</abbr>

※ブラウザにより、表示スタイルが異なるので、デザイン上 cssリセットを要する

address 要素概要

要素ツリー内のarticle要素又はbody要素(ドキュメント全体)の著作者連絡先情報

HTMLの内容に対してのものではない場合、(たぶん住所一覧や店舗一覧などを指していると思われる)連絡先情報は p などで記載すべき

連絡先情報には、公開日や更新日時のような他の情報を含めるべきではない

対象とするセクションが footer要素を持つ場合、addressをその中に配置するのが一般的。

この要素は全ての要素間で共通のグローバル属性以外の属性を持たない。

address要素は子孫にヘッディング・コンテンツとセクショニング・コンテンツ、header要素とfooter要素を入れてはいけない

area 要素概要

画像のホットスポット領域の定義、また任意で領域とハイパーテキストリンクの関連づけを行う。

* map要素内だけで使用。

MDNの解説

article 要素概要

ドキュメント、ページ、アプリケーション、又はサイトの中で自己完結した構成物。

例:フォーラムへの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザコメント、インタラクティブなウィジェットやガジェット、その他のコンテンツで独立したアイテムなどとのこと。

いろんな人の解釈を見てみた結果、「別のページでarticle指定の部分だけ貼りつけても意味が通じる独立した記事」ってことらしい。

それぞれの article は、主に子要素として見出しを含むことで明確にすべき、とのこと。

article要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表す。
例:ブログ記事へのコメント
<article>ブログ記事<article>コメント</article></article>
入れ子にした場合にコメントが独立した記事といえるのかは不明だけど。

article要素の著者情報はaddress要素で記述可能だけど、入れ子にされたarticle 要素に適用は不可。要するに上記例のコメントにはaddressタグ付けられないとかの意味?

article要素の発行日時は、time要素のpubdate属性で示せる。
※ time 要素の pubdate 属性は W3C HTML 5 標準から外された

article要素の発行日時は、time要素のdatetime属性で示せる。

aside 要素概要

aside 要素(aside)は、メインコンテンツとの関連性が希薄でメインコンテンツから切り離す事が可能なセクションを表します。いわゆる「サイドバー」や、メインの記事内のコラムの部分に頻繁に用いられます。用語の説明、広告(コンテンツ・マッチング広告の様な主文に僅かな関連性を持つ広告であれば article 要素等の子要素として配置する)、著作者に関する情報、ウェブアプリケーションに於けるユーザ情報、ブログロール等に用います。

文章中の括弧書きについては、文章のフローに属するものであるといえ、ここに aside要素を使用するのは不適切です、とのこと。

audio 要素概要

HTML audio要素は、ドキュメント内で音声コンテンツを表す。audio 要素は HTML5 の一部として導入され、複数の音声ソースを含むことができる。音声ソースは source要素の src 属性を使用して表し、ブラウザはもっとも適切なソースを選択する。また、audio要素をサポートしないブラウザ向けのコンテンツも追加できる。

MDNの解説

コンテンツカテゴリ:controls 属性を持つ場合は、インタラクティブコンテンツとパルパブルコンテンツ。

b 要素概要

重要性や関連性を伴わないで通常と文体の異なるテキストの範囲。(表示スタイルとして)太字にしたい、などの使い方はしない。

strong、em、markなどをつけないキーワードや文に使う。

例として要約文中のキーワードやレビュー文内での商品名、通常太字で表示される部分、記事中のリード文など

base 要素概要

相対URLの基点となるURLを指定

baseで指定するURLは一つのみ。

href属性でURLを指定。

target属性でターゲットを指定。

bdi 要素概要

他部位とは異なる書字方向で書式設定するテキストの範囲

例:アラビア語の単語を表示する場合など

dir属性が継承されず、無指定の場合の初期値はauto(ブラウザがの内容を自動で書字方向を決定)

Internet Explorer , Opera , Safari で未サポート(20170829現在)

bdo 要素概要

テキストの書字方向規則を部分的に上書き

例:ltr書字方向規則を持つ英語・日本語の文中に rtl書字方向規則を持つアラビア語等のテキストを挿入する際に用いる事が出来る

dir属性で以下を指定。ltr(Left to Right):テキストを左から右。rtl(Right to Left):テキストを右から左。auto:初期値。ブラウザが自動判定。

blockquote 要素概要

段落のあるようば長い文章の引用文

セクショニング・ルート

cite属性で引用元の文書のURIや引用元に関するメッセージを示せる。(画面には表示されない)

引用元の文書のタイトルなどを明示する場合はcite要素(タグ)を使う。(画面に表示される)

※複数の段落などを伴わない短い引用はq要素

br 要素概要

改行

※clear属性がHTML5で廃止のため、回り込み解除:<br clear="all">は使わず、CSSで「clear:both」指定等で対応が必要。

button 要素概要

クリック可能なボタン

リスト化、ラベル付け可能、サブミット可能のフォーム関連要素。

autofocus属性 : ユーザーが別の操作によって動作を上書きしない限りページ読み込み時に button 要素にインプットフォーカスを置くように指示するための属性。※文書中のフォーム関連要素のうちの一つだけにこの属性を指定することが可能。

disabled属性 : ユーザーによるボタン操作を無効化。指定されていない場合、ボタンを内包する親要素の設定値を継承。

form属性 : button 要素が紐付けられた form 要素 (form owner) の id。
この属性はform要素の子孫にする以外で、同一文書内にある任意の form 要素に button 要素を紐づけることを可能とするための属性。

formaction属性 : ボタンによって送信された情報を処理するプログラムの URI。指定した場合、そのボタンの属するフォームの action 属性よりも優先される。

formenctype属性 : ボタンを送信ボタンとして使用する場合、ブラウザーがフォーム情報をサーバーに送信するために使用するコンテンツの種類を指定。
この属性が指定されている場合、button 属性が紐付けられた form 要素 の enctype 属性より、ボタンのそれが優先される。

以下の値を指定可能
・application/x-www-form-urlencoded : 初期値。属性を指定していない場合、この値が使用される。
・multipart/form-data : input 要素の type 属性に file を指定して使用する場合に使用。
・text/plain : プレーンテキストとしてフォームデータを送信する場合に使用。

formmethod属性 : ボタンが送信ボタンの場合に、ブラウザーがフォーム情報を伝送するために使用する HTTP メソッド。
この属性が指定されている場合、ボタンの属するフォームの method属性より優先される。

以下の値を指定可能
・post : フォームからのデータはフォームの内容を含めてサーバーに送信される。
・get : フォームからのデータはセパレーターとして '?' を使用して form 属性の URI に追加され、その結果となる URI をサーバーに送信。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用する。

formnovalidate属性 : ボタンが送信ボタンである場合に、フォームデータ送信時に内容をバリデートしないように指定するもの。
この属性が指定された場合、ボタンの属するフォームの novalidate 属性より優先して使用される。

formtarget属性 : ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示す名前もしくはキーワード。ブラウジングコンテキスト (タブ、ウィンドウ、またはインラインフレーム) の名前またはキーワードを参照する。
この属性が指定された場合、ボタンの属するフォームの target より優先される。
以下のキーワードは a タグの target属性と同様に、特別な意味を持つ。_self(デフォルト値)、_blank、_parent、_top

name属性 : フォーム情報とともに送信される、ボタンの名前。

type属性 : ボタンの種別。以下の値を指定可能。
・submit : 自身が属するフォームのデータをサーバーに送信するボタン。type 属性が指定されていない場合、又は属性値が動的に空にされたり不正な値にされた場合のデフォルトの動作。
・reset : ボタンに紐づけられたフォームコントロールの値をすべて初期値に戻すリセットボタン。
・button : type 属性に button を指定したボタンには、デフォルトの動作はなく、クリックするなどしても何も起こらない。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定する時に使用。
・menu : 指定した menu 要素で定義されたポップアップメニューを開くボタンになる。

value属性 : ボタンの初期値。フォームデータとともに送信されるボタンに関連付けられた値を定義。フォームを送信する際に、パラメーターとしてサーバーに渡される。

MDNの解説

canvas 要素概要

javascript等でグラフィックを描画

SVGがベクタ系、canvasはラスタ系のグラフィック。

画像を図形でマスクしたりなど、画像合成が可能。画像の重ね方の細かな描画方法を指定することもできる。

canvasのみのアニメーションは、基本的にjavascriptでキャンバスに次々と絵を描画させる手法で実現する。

タグの中で代替コンテンツを記述しておくとcanvas未対応ブラウザの場合に表示される(はず)

cite 要素概要

作品名

書籍、楽曲、映画、TV番組、絵画、彫刻等の作品タイトルを示す。

人名には使わない。

code 要素概要

コンピューター・コードの断片を示す。

datalist 要素概要

入力候補の選択肢を表示するデータのリストを定義。候補の値はoption要素のvalueで指定。

例:
<input list="idname" />
<datalist id="idname">
<option value="候補1">
<option value="候補2">
</datalist>

ブラウザ対応:
Chrome20、Edge、Firefox4.0、IE10、Opera9.5
※Safariは20170925現在、未サポート

del 要素概要

文書から削除されたテキストの範囲を表す。ブラウザが打ち消し線のスタイルを付けてくれる(はず)。

※フレージングコンテンツだけを含む場合はPh。

cite属性:変更の説明を記したリソースへのURI等を記述

datetime属性:変更日時を記述

※打消し線要素strikeやsを使うよりこちらを使用する方が良い。

details 要素概要

追加情報や操作ボタンなどを表示する、ユーザ操作で表示非表示を切り替え可能なディスクロージャー・ウィジットを表す。

ディスクロージャー・ウィジットは「ディスクロージャー=コンピュータセキュリティ業界における情報公開」 + 「ウィジット=GUI(グラフィカルユーザインタフェース)を構成する部品要素」

summary要素には要素の内容の要約、キャプション、説明を記述。

open属性:ページ読み込み時に詳細内容が表示されるよう指定。既定値 false では、詳細内容は表示しない。

セクショニング・ルート

MDNの説明

※Edge、IE10は現在未サポート(20170925)

dfn 要素概要

用語の定義を表す。

dfn要素による用語の定義は、p、section、または定義リスト関連要素(dtとddのペア)の中で行うべき。

定義内容の規則。1:dfn要素がtitle属性を持つ場合は、この値が定義内容。2:dfn要素がtitle属性を持たない場合で、title属性を持つabbr要素のみを内包する場合、そちらのtitle属性の値が定義内容。1,2以外はdfn要素の内包テキストが定義内容となる。

div 要素概要

フローコンテンツの為の汎用コンテナ。

CSSによるスタイリングの用途等で、要素のグループ化する場合に使う。

WHATWG HTML では親要素として dl 。
子要素として、親が dl である場合1つ以上の dt 要素と、それに続く1つ以上の dd要素
さらに任意で script要素や template要素。

dialog 要素概要

HTML5.1で策定中…

ユーザ操作可能なダイアログ。

セクショニングルート

デフォルトでは表示しない。open属性を付加すれば最初から表示

20170925現在、Chrome37、Opera24以外は未サポート

MDNの説明

dl 要素概要

用語とその説明のセットのリストを表す。

dl要素の子要素が1つの名前の値のペアの場合はパルパブルコンテンツとなる。

W3Cのcodeサンプルでは、FAQをdl・dt・ddでマークアップする例も掲載されている。

子要素として、任意で script 要素や template 要素。

WHATWG HTML では1個以上の div 要素
MDNの子要素divのサンプル

em 要素概要

強調されたテキスト。

em要素は入れ子にすると段階に応じてより強い程度の強調を表す

暗示的あるいは明示的な対比を表すために使われたりする。

embed 要素概要

外部アプリケーション等のプラグインを必要とするデータの埋め込み。

width属性・height属性で表示幅・高さを指定

src属性でリソースのURLを指定。

type属性でMIMEタイプを指定。

MDNの解説

fieldset 要素概要

フォーム内部品のグループ化。

セクショニング・ルート

リスト化、フォーム関連要素。

disabled属性でその子要素のフォームを無効にし、編集不能にできる。

form属性でformのID名を指定することで、form外にボタン等を設置できるようになる。

name属性はfieldsetでグループ化したグループの名前

MDNのサンプル例

figure 要素概要

図表などの自己完結型のコンテンツを表す。

メインのフローに関連しつつ、無関係な位置に配置が可能

使用例:テキストの中から参考文献として参照されるが、メインのフローに影響を与える事無く別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など。

セクショニング・ルート

figure要素の子要素のfigcaption要素でキャプションを表す。

footer 要素概要

自身の祖先要素の内で直近の Se かセクショニングルート要素のフッターを表す。

通常、そのセクションの著作者に関する情報、関連ドキュメントへのリンク、著作権情報等が記述される使い方。

セクションの著作者や編集者の連絡先情報は、footer要素内にaddress要素で配置される。

form 要素概要

ユーザがサーバーに情報を送信できるフォームを表す。

accept-charset属性 : サーバーが受け入れる文字エンコーディングのリスト。リストはスペースで区切る。リストされている順序を優先順位として使用。デフォルト値である予約語 "UNKNOWN" は、form 要素を含むドキュメントのエンコーディングと同じであることを示す。

action属性 : フォーム経由で送信された情報を処理するプログラムの URI。
button , input の formaction 属性で上書きが可能

autocomplete属性 : input 要素がデフォルトで、ブラウザーによる値の入力補完を受けるかを示す。
フォームに属する要素の autocomplete 属性で上書き可能。
以下の値が指定可能
off : ユーザーが、フォームを使用するたびにすべての値を入力、又は独自の入力補完を使用する必要がある。ブラウザーが入力補完をサポートしない。
on : ブラウザーはユーザーが以前に入力した値に基づき、これを自動補完のための候補として使用する。
MDNの解説

enctype属性 : method 属性の値が post であるとき、この属性はフォームをサーバーに送信する際に使用するコンテンツの MIME type を示す。
button , input の formenctype 属性で上書き可能。
以下の値が指定可能。
・application/x-www-form-urlencoded : 初期値。
・multipart/form-data : type 属性で "file" を指定した input 要素のために使用する値。
・text/plain (HTML5)

method属性 : フォームを送信する際にブラウザーが使用する HTTP メソッド。
button , input の formmethod 属性で上書き可能。
以下の値 [post] [get] が指定可能。

name属性 : フォームの名前。HTML5 ではドキュメント内のフォーム間でユニークである必要があり、空文字列は不可。

novalidate属性 : フォームを送信するときにバリデートしないことを示す真偽値。
この属性を指定していない (= バリデートされる) 場合、デフォルト設定を button や input の formnovalidate 属性で上書き可能。

target属性 : フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワード。HTML5では、ブラウズ・コンテキストの名前またはキーワード。
button , input の formtarget 属性で上書き可能
以下は特別な意味を持つ。[_self] [_blank] [_parent] [_top]。また、iframeのnameを指定すると、応答を名前のついた iframe に読み込む。

h1,h2,h3,h4,h5,h6 要素概要

見出しを表す。

h1を最上位でh6までの6段階のレベルで実装。

header 要素概要

イントロダクション、ナビゲーション等のグループを表す。

ロゴ、セクションのヘッダー部分、検索フォームなどを設置したりする使い方がされる。

hr 要素概要

段落間のテーマの意味的な区切りを表す。

視覚的な区切り線として使ってはいけない。

i 要素概要

イタリック要素を表す。

イタリックは何らかの理由で他のテキストと区別されるテキストの範囲。

使用例:技術用語、外国語のフレーズ、または架空の人物の思考など

iframe 要素概要

現在のページに他のHTMLページを埋め込むフレーム。

イタリックは何らかの理由で他のテキストと区別されるテキストの範囲。

使用例:技術用語、外国語のフレーズ、または架空の人物の思考など

詳細情報1:HTML5.jpのiframe要素説明

詳細情報2:MDNのiframe要素説明

img 要素概要

画像を表示。

画像が表示できない場合はalt属性で定義されたテキストを表示。

要素がusemap属性を持つ場合は、インタラクティブコンテンツカテゴリになる。

alt属性で代替テキストを定義。

input 要素概要

フォーム用の入力部品を作成。

リスト化、サブミット可能、リセット可能、フォーム関連要素。

※typeの値がhiddenでない場合はラベル付け可能要素、パルパブルコンテンツ。

MDNの解説

ins 要素概要

文書に追加されたテキストの範囲を表す。delの逆。

※フレージングコンテンツだけを含む場合はPh。

cite属性:追加の説明を記したリソースへのURI等を記述

datetime属性:追加日時を記述

kbd 要素概要

コンピューターへのユーザーの入力コードを表す。

例:保存する場合は、
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>を押す。

keygen 要素概要

20170925現在 非推奨。削除される可能性が高いので使わない方がよい。

フォームの一部として公開鍵を送信するための要素。

リスト化、ラベル付け可能、サブミット可能、リセット可能、フォーム関連要素。

詳細情報1:HTML5.jpのkeygen要素説明

詳細情報2:MDNのkeygen要素説明

label 要素概要

ユーザインタフェース内のアイテムのキャプション。フォームのラベル。

フォーム関連要素。

for属性でアイテムのid指定、又はlabelの子要素配置で、ラベルとコントロールを紐付けることができる。
for属性で指定したidを持つ要素を、このラベルが示している「ラベル付きコントロール」と呼ぶ。

label要素の子孫に、他のlabel要素配置は禁止。ラベルが示す以外のラベル付け可能フォームコントロール要素を子孫にするのも禁止。

link 要素概要

文書と外部リソースとの関係を示す。

※itemprop属性を与えた場合はPh。

charset属性はHTML5で廃止。

詳細情報1:HTML5.jpのlink要素説明

詳細情報2:MDNのlink要素説明

map 要素概要

イメージマップを定義。area要素とセットで使用。

name属性指定必須。

※フレージングコンテンツだけを含む場合はPh。

mark 要素概要

他の場所からの参照を目的とした、テキストのハイライト。(ユーザーの行動に関連があるもの→検索結果のキーワード等)

例:検索窓からの検索結果表示ページで、検索語句をハイライトする為などに使用。

例:引用文で、引用元の著者が強調してないテキストを、引用側が強調したい場合に、strongではなく、markを使う。

meta 要素概要

他のメタ関連要素で表せない任意のメタデータ情報を提示。

他のメタ関連要素:base、link、script、style、title

nameを設定→文書レベルのメタデータ。ページ全体に適用

http-equivを設定→プラグマディレクティブ。(サーバへの情報)

charsetを設定→文字集合宣言。ページ全体に適用

itempropを設定→ユーザ定義メタデータ。

※itemprop属性を設定すると、Ph。

親要素:
meta charset 、meta http-equiv →head要素。
http-equiv がエンコーディング宣言でない場合、head要素内のnoscript要素の内部にも配置可能。
meta name→Meを受け入れるすべての要素。
meta itemprop→MeまたはPhを受け入れるすべての要素。

詳細情報1:HTML5.jpのlink要素説明

詳細情報2:MDNのlink要素説明

meter 要素概要

既知の範囲内のスカラー値、または小数値を表す。

ラベル付け可能要素

value属性の値が下限0、上限1でない場合、min・max属性でvalueの下限・上限の定義が必要。

例:ディスクの使用状況、選挙の特定候補者の得票数、など範囲が明確な文脈内でのみ使用可能。

例:身長・体重・貯金額・降雨量・サッカーの得点、等の範囲の曖昧な量や個数に用いる事は不適切。

例:進捗率を表すにはprogress要素が適している。

※他のmeter要素の子孫要素として配置してはならない

MDNの説明

nav 要素概要

主要なナビゲーションである事を表す。

ページ上の全てのリンク集合に使用するのは誤り。
ページ上に一つしか設置してはならないというわけではない。

noscript 要素概要

スクリプトが無効の場合に表示するセクション。

※スクリプトが無効でhead要素の子孫である場合:0個以上の、link・style・meta要素

※スクリプトが無効でhead要素の子孫でない場合:トランスパレント要素

※それ以外:Fl、Ph

object 要素概要

埋め込みオブジェクト要素

画像、ネストされたブラウジング・コンテキスト、プラグイン等の外部リソースを指す。

usemap 属性を持つ場合、In

リスト化、サブミット可能のフォーム関連要素。

HTML5で廃止された属性が多数あるので注意。

MDNの解説

ol 要素概要

順序付きリスト要素

順序に意味がある場合に使用。

子に最低1個のli要素を包含する場合、パルパブルコンテンツ

子となるli要素にolやulを含む事も可能。

reversed属性で順逆にならぶ指定が可能となった。

start属性が非推奨(HTML4)から再導入。
リスト項目の順序の開始値を指定

type属性は順番の形式を指示
[a:英小文字] [A:英大文字] [i:小文字のローマ数字] [I:大文字のローマ数字] [1:数字(既定値)]
非推奨からHTML5で再導入。リスト番号の値に関する事情がなければ、代わりに CSS の list-style-type プロパティを使用すべき

main 要素概要

文書内の主要な部分を表す。

二つ以上のmain要素は不可。

article, aside, footer, header, nav 要素の子孫として main 要素を入れてはいけない

output 要素概要

計算結果を表す。

リスト化、ラベル付け可能、リセット可能、フォーム関連要素。

for属性:計算の入力値を与える他要素のid

form属性:計算するform要素を指定。属性値はform要素のid。formの子要素にすればform属性省略可。

name属性:要素の名前

p 要素概要

段落を表す。

終了タグ省略条件:後続要素がaddress、article、aside、blockquote、div、dl、fieldset、footer、form、h1~h6、header、hr、menu、nav、ol、pre、section、table、ul、別のp要素、の場合。
または親要素内で他のコンテンツがなく親要素がa要素ではない場合

p要素同士の間隔を調整するには CSS の margin プロパティを使用する。
空の p要素(<p></p>) や br要素を二つのp要素の間に記述してこれを実現するのは誤り。

pre 要素概要

整形済みテキストを表す。

progress 要素概要

タスクの進捗状況の表示に使用。

ブラウザまかせ、一般的にはプログレスバーが表示される

ラベル付け可能

子要素にprogress要素は不可。

max属性:値の最大値を指定。(0以上の浮動小数点数値)省略すると1。

value属性:進捗値。0からmaxまでの間の数値。

ブラウザ対応状況
Chrome6.0、Firefox14.0、IE10、Opera11.0、Safari5.2
※iOS版Safariは不定状態のプログレスバーを未サポート

q 要素概要

インラインの引用であることを表す。段落やセクションをまたがない短い引用のためのもの。
長文の引用はblockquote

cite属性:引用元のURIや引用の情報

ruby 要素概要

振り仮名。
ルビのアノテーション(振り仮名)を用いる事が可能な HTML 要素
ルビのアノテーションとは、東アジアの言語などの語句、例えば漢字などの発音を示すもの、とのこと。

rt要素(文字の発音を示す)やrp要素(未サポートブラウザ用のフォールバックで括弧を示す)とともに用いる。

Firefox、Operaは未サポート(2015.01現在) ※Firefoxではアドオンのインストールで表示可能となる。

20170901現在、Operaのみ未サポート。サポートブラウザ:Chrome5.0 FF38 IE5.0 Safari5.0

MDNの解説
HTML5.JPの解説

<ruby>
漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
<ruby>
漢字<rp>(</rp><rt>Kanji</rt><rp>)</rp>
</ruby>

samp 要素概要

コンピュータープログラム等からの出力を表す。

インライン要素

script 要素概要

スクリプトを埋め込み、または外部参照するコードを指定。

async属性:可能ならブラウザがスクリプトを非同期的に実行すべきと示す。インラインスクリプトは効果なし。(Opera未サポート)

src属性:外部スクリプトのURI指定。

type属性:コードのスクリプト言語を MIME タイプに沿って指定。指定なしの場合はJavaScript。

defer属性:文書のパース完了後に実行することをブラウザに示す。src属性を持たない場合は使用しない方がいい。(Opera未サポート)

section 要素概要

見出しを伴う意味的なグループ化が可能な、文書の一般的なセクションを表す。

単独で意味を成す集合となる場合はarticle要素を使うべき。

汎用コンテナとして使用する場合はdiv要素を使うべき。

section の子要素に見出しを含めるべき(それぞれの section が識別可能であるべきなので)

select 要素概要

選択式のメニューを提供するコントロールを表す。

リスト化、ラベル付け可能、リセット可能、サブミット可能のフォーム関連要素。

autofocus属性 : ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定。(文書内の1つのフォーム要素のみ)

disabled属性 : 選択不可能にする属性。

form属性 : 同じ文書内の form 要素の IDで、select 要素が関連付けられた form 要素を指定。

multiple属性 : リストの複数の選択肢を選択可能にする指定。

name属性 : コントロールの名前。

required属性 : 空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性。

size属性 : コントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表す。初期値は 0 。

small 要素概要

細目などの注釈を表す要素。

HTML4までのスタイル用の最小文字という意味ではなくなった。

使用例:帰属の明示、著作権表記

span 要素概要

フレージング・コンテンツの為の汎用コンテナ。

CSSによるスタイリングの用途等で要素のグループ化が必要な場合に用いる。

div要素がブロックレベル要素の汎用コンテナ、spanはインラインレベル要素の汎用コンテナ

strong 要素概要

重要なテキストを表す。(強い強調)

strong要素の入れ子でより高い重要性を示せる。

strong要素は「重要」、em要素 は「強調」を表し、意味が違う。

style 要素概要

文書のスタイル情報。要素内にCSSの文法で記述する。

※scoped属性がある場合はFl

type属性:スタイル言語を MIME タイプで定義。省略した場合、text/css

media属性:メディアクエリを指定。

scoped属性:指定した場合、スタイルが親要素にのみ適用される。省略した場合、文書全体にスタイルを適用。

title属性:代替のスタイルシートセットを指定。

disabled属性:要素内に指定されたスタイル規則が適用されなくなる

sub 要素概要

表記規則の理由で小文字で、又はメインテキストより小さく表示されるべきテキストの範囲を示す。(下付き)

一応、数式や化学式の表記のために使う。

商品名やロゴのデザイン表記の為に使うのは誤り。

sup 要素概要

表記規則の理由でメインのテキストよりも高い位置に、又はメインテキストより小さく表示されるべきテキストの範囲を示す。(上付き)

一応、数式やフランス語に於ける訳語表記のために使う。

商品名やロゴのデザイン表記の為に使うのは誤り。

table 要素概要

表、テーブル。2つまたはそれ以上の次元のデータ。

子要素:以下の順。

  • 任意の1個のcaption要素
  • 0個以上のcolgroup要素
  • 任意の1個のthead要素
  • 以下2つの選択肢のどちらか
    1. 1個のtfoot要素で、以下が後続
      • 0個以上のtbody要素
      • または、1個以上のtr要素
    2. 以下に任意の1個のtfoot要素が後続
      • 0個以上のtbody要素
      • または、0個以上のtr要素

非推奨となった属性:align、bgcolor、border、cellpadding、cellspacing、frame、rules、summary、width

MDNのtable表サンプル

textarea 要素概要

フォームのテキストエリア=複数行のテキスト編集コントロールを表す。

リスト化、ラベル付け可能、リセット可能、サブミット可能のフォーム関連要素。

autofocus属性 : ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定。(文書内の1つのフォーム要素のみ)

disabled属性 : 選択不可能にする属性。

form属性 : 同じ文書内の form 要素の IDで、select 要素が関連付けられた form 要素を指定。

name属性 : コントロールの名前。

required属性 : 空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性。

cols属性 : テキストコントロールの幅。指定しない場合のデフォルト値は 20。

rows属性 : テキストの行数。

maxlength属性 : ユーザーが入力可能な文字 (Unicode コードポイント) の最大数。

minlength属性 : ユーザーが入力しなければならない最小文字数 (Unicode コードポイント) 。

placeholder属性 : コントロールに何を入力できるかに関する、ユーザーへの助言。

readonly属性 : ユーザーがコントロールの値を変更できないことを示す。disabled 属性と異なり、readonly 属性はユーザーがコントロールをクリックしたり選択することを妨げない。読み取り専用のコントロールの値は、フォームとともに送信可能。

selectionDirection属性 : 選択されるときの方向を示す。LTR ロケールで左から右、RTL ロケールで右から左へ選択する場合、 "forward"、逆方向は "backward" 。不明である場合は "none" を指定できる。

selectionEnd属性 : 現在選択している領域の最後の文字のインデックス。未選択状態ではこの値は、テキスト入力カーソルの位置の直後にある文字のインデックスを表す。

selectionStart属性 : 現在選択している領域の最初の文字のインデックス。未選択状態ではこの値は、テキスト入力カーソルの位置の直後にある文字のインデックスを表す。

spellcheck属性 : true に設定するとその要素はスペルや文法のチェックが必要であることを示す。値 default は要素がデフォルトの動作に従うことを示し、親要素の spellcheck の値に基づく。値 false はチェックが不要であることを示す。

wrap属性 : テキストの折り返しの制御法を示す。デフォルト値は soft。以下の値を指定可能。
・hard : 各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行 (CR+LF) を挿入。cols 属性が必要。
・soft : ブラウザーは値に含まれる改行 (CR+LF のペア) をすべて維持し、改行の付加は行わない。

autocomplete属性 : ブラウザーによる値の入力補完を受けるかを示す。 以下の値が指定可能
off : ブラウザーが入力補完をサポートしない。
on : ユーザー入力値に基づき、ブラウザーが入力補完をサポート。
※20170925現在、各ブラウザで未サポート。

MDNの説明

time 要素概要

24時間制の時刻、又はグレゴリオ暦の正確な日付を表す。

機械可読な形式で日付や時刻を提供するために使用

datetime属性:要素の日時を示し、省略可能な時刻を伴う有効な日付の文字列で表記。

MDNの解説

title 要素概要

文書のタイトルを定義。

u 要素概要

テキストのベースライン下部に下線をレンダリング。

発音しない非文字の注記を伴うテキストの範囲

HTML5では、明確にレンダリングされているがはっきりと伝わらない部分、全てが漢字で構成されスペースで単語を区切る慣習も無い中国語に於いての、固有名詞である事の明示の為の特別な表記、スペルミスとしての印付け、等で使用。

単純に(特に意味なく)アンダーライン表示する場合は span + css(text-decoration:underline)。

ul 要素概要

順不同リスト要素

配置順に意味を持たない場合に使用。

子に最低1個のli要素を包含する場合、パルパブルコンテンツ

子となるli要素にolやulを含む事も可能。

type属性の「circle」「disc」「square」等は廃止のため、CSSのlist-style-typeを使う。

var 要素概要

数式やプログラムのコード中での変数を表す。

video 要素概要

映像コンテンツを埋め込む。

controls属性がある場合はIn

MDNの解説

wbr 要素概要

テキスト内でブラウザが任意で改行可能な位置を指定。

IE7以降で未サポートになったとの情報あり。

menu 要素概要

選択可能なメニューのリストやコマンド。

詳細情報1:HTML5.jpのmenu要素説明

詳細情報2:MDNのmenu要素説明

body 要素概要

HTML 及び html 文書のコンテンツを示す要素。文書中に一つだけ配置可。

※タグ省略:body要素内の最初のノードが コメント、空白文字、script要素、style要素でない場合は、開始タグが省略可。
body 要素が内容を持ち、且つ、最初のノードがコメントでない場合、終了タグが省略可。

caption 要素概要

テーブルのタイトルを表す。

table要素の最初の子要素としてのみ配置可能。

caption要素の親要素であるtable要素がfigure要素の唯一の内容物である場合、figcaption要素をキャプションとして優先的に利用し、caption要素を使用しないのが正しい記述。

コンテントモデルはFlだが、table要素をその子孫にしてはいけない。

col 要素概要

テーブル内の列を定義

colgroupの子要素としてのみ使用。colgroup要素にはspan属性を持ってはいけない。

colがない場合、colgroup要素のalign属性を継承。デフォルトはleft。

colのspan属性について。
col要素が及ぶ連続した列の数を示す正の整数を持つ。指定しない場合のデフォルト値は 1

colgroup 要素概要

テーブル内の列グループを定義

※タグの省略:最初の子要素がcol要素で、終了タグを省略したcolgroup要素が前にない場合、開始タグを省略可能。
空白またはコメントが後にない場合、終了タグを省略可能。

span属性:連続した列の数を示す正の整数。省略時のデフォルトは1

※colgroup要素内に1個以上のcol要素がある場合は、span属性を使ってはいけない。

dd 要素概要

定義リスト要素dlの定義語の説明部分を表す。

※タグの省略:開始タグ必須。他のdd要素が後続する場合、又は親のdl要素内に後続する要素がない場合、終了タグが省略可能

W3Cのcodeサンプルでは、FAQをdl・dt・ddでマークアップする例も掲載されている。

参考:複数の説明がある場合、ddをdtの後に複数配置可能だが、1つの説明文の段落を区切る目的でddを複数配置するのは間違っていると指摘されている。この場合は dd ~ /dd の間にpで段落を作るのが正しい手法。

dt 要素概要

定義リスト中の用語を表す。

※タグの省略:開始タグ必須。他のdd要素が後続する場合、又は親のdl要素内に後続する要素がない場合、終了タグが省略可能

W3Cのcodeサンプルでは、FAQをdl・dt・ddでマークアップする例も掲載されている。

※親要素として、WHATWG HTML では dl 内の div

figcaption 要素概要

親のfigure要素中のコンテンツのキャプションや説明を表す。

figure要素内の先頭、又は末尾に配置。figcaptionは必須ではない。

head 要素概要

HTML 文書のメタデータ群を内包する要素

※タグの省略:head要素内の最初のノードがコメントでない場合、開始タグを省略可能。head 要素に続く最初のものが空白文字やコメントでない場合、終了タグが省略可能。

※「タイトル情報が上位プロトコルから入手可能」の意味は、メール編集用のHTMLなどの場合に、タイトル情報はメールのSubjectがタイトル情報となるため、title要素が不要、ということ。

html 要素概要

HTML・XHTML文書のルートとなる要素。他の全ての要素は、この要素の子孫として配置する。

※タグの省略:html要素の最初のノードがコメントでない場合、開始タグを省略可能。html要素の最初のノードがコメントでなく、子となるbody要素が空でないか開始タグを持つ場合は、終了タグが省略可能。XHTMLでは省略不可。

html要素にlang属性を指定し、ドキュメントの言語を指定することが推奨される。

legend 要素概要

凡例フィールド要素。親要素であるfieldsetのキャプションを表す。

li 要素概要

リストアイテム要素。リストの項目を表す。

※タグの省略:直後に別のli要素が続く場合、又は他のリストアイテムが続くことなく親要素が閉じられる場合、終了タグが省略可能

親がolの場合、value属性でリストアイテムの序数値を整数値で示せる。

optgroup 要素概要

select要素内の、選択肢 (option) のグループを作成。

※タグの省略:開始タグは必須。要素の直後に他のoptgroup要素が接続する場合、また親要素が他の内容を持たない場合、終了タグが省略可能。

label属性:選択肢グループの名前。optgroup要素を使用時には、この属性が必須。

disabled属性:オプショングループ内の項目のいずれも選択不能にする場合に指定。

optgroup 要素の入れ子は不可。

option 要素概要

select・optgroup・datalist要素内の、項目を定義。

※タグの省略:開始タグは必須。直後に別のoption要素またはoptgroup要素がある場合、または親要素が他に内容を持たない場合は終了タグを省略可能。

label属性:選択肢の意味を示すラベルテキスト。
label 属性を定義していない場合、要素のテキストコンテンツが要素の値になる。

disabled属性:選択肢を選択不能にする場合に指定。

selected属性:初期状態で選択する選択肢を指定。
multiple を設定していない select 要素の子孫である場合、select 要素内で 1 個の option だけに指定できる。

value属性:フォームで送信する値を表す。省略時は option 要素のテキストコンテンツが値になる。

param 要素概要

object要素のパラメータを定義。

rp 要素概要

ルビをサポートしないブラウザで括弧を表示するために使用。

20170901現在、Operaのみ未サポート。サポートブラウザ:Chrome5.0 FF38 IE5.0 Safari5.0

MDNの解説
HTML5.JPの解説

<ruby>
漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
<ruby>
漢字<rp>(</rp><rt>Kanji</rt><rp>)</rp>
</ruby>

rt 要素概要

ruby使用時の文字の発音を示す。

20170901現在、Operaのみ未サポート。サポートブラウザ:Chrome5.0 FF38 IE5.0 Safari5.0

MDNの解説
HTML5.JPの解説

<ruby>
漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
<ruby>
漢字<rp>(</rp><rt>Kanji</rt><rp>)</rp>
</ruby>

source 要素概要

audio・video要素に複数のメディア形式を指定。

src属性:メディア・リソースのアドレス。必須指定。

type属性:MIME-typeを指定。必要ならcodecsパラメーターも共に指定。

media属性:リソースの意図したメディアのメディア・クエリー

summary 要素概要

details要素の内容の要約、キャプション、説明を表す。

MDN解説によると、2014/02/19現在で Chrome(v12以降) 以外は未対応

tbody 要素概要

表の本体を表す行のセットを定義。

必須ではない

※タグの省略:最初の子要素がtr要素で、終了タグを省略したthead要素、tfoot要素又はtbodyが前にない場合、開始タグを省略可能。
tbody要素がtbody要素またはtfoot要素の直後にある場合、又は親table要素内に他のコンテンツがない場合は終了タグを省略可能。

tbodyはcaption要素、colgroup要素、thead要素の後に配置する。

td 要素概要

テーブルでデータを包含するセルを定義。

※タグの省略:開始タグは必須。直後にth要素又はtd要素がある場合、又は親要素内で以降のデータがない場合は終了タグを省略可能。

colspan属性:セルの範囲が及ぶ列の数。1~1000。(大昔の言いまわしでは、列方向のセル結合)
0を設定した場合、セルが属する colgroupの終端まで拡張

rowspan属性:セルの範囲が及ぶ行の数。1~65534。(大昔の言いまわしでは、行方向のセル結合)
0を設定した場合、セルが属するテーブルセクション (thead、tbody、tfoot) の終端まで拡張

headers属性:空白文字で区切られた文字列のリストを持つ。各々の文字列は、この要素に当てはめる th要素のid属性と対応。

セクショニング・ルート

tfoot 要素概要

テーブルの列を総括(要約)する行のセットを定義。

※タグの省略:開始タグは必須。tfoot要素の直後にtbody要素がある場合、又は親table要素内に以降のコンテンツがない場合は終了タグを省略可能。

tfootはcaption要素、colgroup要素、thead要素の後に配置。
tbody・tr要素の前方 又は 後方に配置可能。(HTML4の時は後ろに配置不可)

th 要素概要

見出しセル。テーブルのセルのグループ用のヘッダであるセルを定義。

※タグの省略:開始タグは必須。直後にth要素又はtd要素がある場合、又は親要素内で以降のデータがない場合は終了タグを省略可能。

colspan属性:セルの範囲が及ぶ列の数。1~1000。(大昔の言いまわしでは、列方向のセル結合)
0を設定した場合、セルが属する colgroupの終端まで拡張

rowspan属性:セルの範囲が及ぶ行の数。1~65534。(大昔の言いまわしでは、行方向のセル結合)
0を設定した場合、セルが属するテーブルセクション (thead、tbody、tfoot) の終端まで拡張

headers属性:空白文字で区切られた文字列のリストを持つ。各々の文字列は、この要素に当てはめる th要素のid属性と対応。

scope属性:th 要素で定義したヘッダが関与するセルを定義。

scopeの値
  • row:ヘッダは、この要素が属する行の全セルに関与することを示す。
  • col:ヘッダは、この要素が属する列の全セルに関与することを示す。
  • rowgroup:ヘッダは、この要素が属する行グループの残りのセルすべてに関与することを示す。残りのセルは table 要素で定義した dir 属性の値に応じて、このセルの右側または左側になる。
  • colgroup:ヘッダは、この要素が属する列グループの残りのセルすべてに関与することを示す。
  • auto

thead 要素概要

テーブルの列のヘッダを表す行のセットを定義。

※タグの省略:開始タグは必須。thead要素の直後にtbody要素又はtfoot要素がある場合は終了タグを省略可能。

theadはcaption要素やcolgroup要素の後方で、tbody要素、tfoot要素、tr要素の前方に配置する。

tr 要素概要

セルの行を定義。

※タグの省略:開始タグは必須。tr要素の直後にtr要素がある場合、または親のテーブルグループ要素 (thead、tbody、tfoot) 内で以降のコンテンツがない場合は終了タグを省略可能。

track 要素概要

メディア要素 (audio・video) の子として使用し、時間指定されたテキストトラック(または時系列データ)を指定。

※メディア要素の子でFlより前に配置。

MDNの解説

update 2015.02.05
カテゴリMENU
お問い合せ