XHTML 1.1 マークアップサンプル付リファレンス

構造モジュール(Structure module)

body

HTML 文書の本体を示します。

head

文章に関する表題、キーワードなどを盛り込める要素です。盛り込める要素は以下の通りです。

• title
• meta
• link
• style
• script
• base
• object
• isindex（非推奨）

html

HTML 文書の構成要素、本文などを記述します。盛り込める要素は以下それぞれ１つずつのみです。

• head
• body

title

文書のタイトルを示します。

テキストモジュール(Text module)

abbr

略語を示します。

XML

acronym

頭字語を示します。abbr との違いについては、仕様を読んでも解釈の難しいところである上、いろいろな説が唱えられてきたそうですが、迷うようなら、より一般的な範疇であるabbr要素としてマークアップしておくのがよいようです。The Web KANZAKI

WWW

address

ドキュメント作成者・サイト運営者を示します。

copyright © purprin

blockquote

改行をまたぐ場合など、比較的長いブロック単位の引用を示します。引用の書式についてはこのページが参考になりました。

XHTML is the reformulation of HTML 4 as an application of XML. XHTML 1.0 [XHTML1] specifies three XML document types that correspond to the three HTML 4 DTDs: Strict, Transitional, and Frameset. XHTML 1.0 is the basis for a family of document types that subset and extend HTML.

br

強制改行を示します。内容を持たない空要素です。

br 要素は論理的な意味は持たないので物理要素となります。
↑改行１つのサンプルです。

↑改行２つ。


↑改行３つ。サンプルなので br ３つなんてやっていますが、アプリケーション上やテキストボックスの中身で改行して出力されるものならともかく、通常は並べて使うことはないでしょう。

cite

出展元、引用元の参照を示します。blockquote 要素内に限らず他の要素と組み合わせることができますが、引用された文章と共に配置する方が引用元との関連が理解しやすいでしょう。

Presentation module は This module defines elements, attributes, and a minimal content model for simple presentation-related markup: とあります。XHTML Modularization 1.1 - XHTML Abstract Modules

code

プログラムコードを示します。

* { margin: 0; padding: 0; }

dfn

専門用語など定義される用語を示します。

XHTML1.1 の メディアタイプは application/xhtml+xml でなければなりませんが、古いブラウザの互換性を保持するためにこの文書は text/html を指定する妥協をしています。

div

ひとつのまとまりを示します。中にはブロック要素・インライン要素を内包できます。

何でもかんでもとりあえずブロック化して囲んでいると div厨 とばかにしてくる人がいます。えーんこわいよう。

div

div

em

強調を示します。

HTML は構造を示したり意味付けしたりする言語ですよ！

h1〜h6

見出しを示します。

kbd

キーボード入力テキストを示します。

Ctrl + Alt + Del を押しても人生は再起動できません。

p

段落を示します。

段落１の本文です。段落１の本文です。段落１の本文です。段落１の本文です。

段落２の本文です。段落２の本文です。段落２の本文です。段落２の本文です。

pre

整形済みテキストを示します。視覚系ブラウザでは、改行されているテキストなどはそのまま改行されて表示されます。

　　　　　...　...,
　　　;;;ノノヽ、）
　　ﾉ:∫:ｉ o e o）
　　ｉ∫::ｉ　∀ｉつ。、::。.::・'゜☆
　ノ::∫:ｉ∪~~ヽ
　ルリレ　　　 ＼　
　　〜ｉ、,,,......,,,ｉ〜
　　　∪　∪

Mac IE では整形済みテキストのスタイルに overflow: visible; 以外を設定すると内包要素が見えなくなってしまいます。 そのためこのページが読み込むスタイルは、Mac IE のみにoverflow: visible;、モダンブラウザには overflow: auto; を指定するようにしています。

q

比較的短いインラインで記述できる程度の引用を示します。

白メガネの人がユーの動画をロックすると言っていた。３ミリ

samp

プログラムやスクリプトの出力結果を示します。

Hello world(o e o)!

span

インライン要素やテキストのまとまりを示します。

script と組み合わせてイベントを起こしたい箇所に使うことが多い気がします。

strong

より強い（em よりも強い）強調を示します。

HTML でフォントの大きさや中央揃えなど見栄えを指定するのは目的に反しますので font などは廃止されましたね。

var

プログラムの変数や引数を示します。

$example

ハイパーテキストモジュール(Hypertext Module)

a

リンクアンカーを示します。

ハイパーリンクばんざい！

リストモジュール(List Module)

dl

項目と内容の２つから成り立つ定義型のリストを示します。

dl（定義型リスト）のサンプル

dlは、項目と内容の２つから成り立つ定義型のリストを示します。dl要素内で定義型リストの項目部分を指定するのがdt、語句の説明を記述する部分を指定するのがddです。

dt

dl要素内で定義型リストの項目部分を示します。(サンプルはdl の項を参照)

dd

dl要素内で定義型リストの語句の説明を示します。(サンプルはdl の項を参照)

ul

順不同リストを示します。

• 箇条書きリストです。
• ul の中身には一つ以上のリストアイテム（li）を内包する必要があります。
• この例ではリストアイテム（li）の中身にさらに順不同リスト（ul）を入れ子にしています。
  • 子リストアイテムです。
    • 孫リストアイテムです。
    • 孫リストアイテムです。
  • 子リストアイテムです。
    • 孫リストアイテムです。
    • 孫リストアイテムです。
• li の中身には、ブロック要素、インライン要素、テキストを内包することができます。

ol

順序付きリストを示します。

1. 順序付きリストです。1, 2, 3...など序列・順番を示すリストを作るものです。
2. ol の中身には一つ以上のリストアイテム（li）を内包する必要があります。
3. リストマーカーの種類は CSS で指定することができます。
4. 算用数字以外の見栄えも指定できます。
   1. 数字の種類を変更するには、ol 要素に任意の class を指定して、 CSS で自由に変更するとスマートです。
      1. ローマ数字の小文字にした例です。スタイルを無効にすると反映されません。
      2. ローマ数字の小文字にした例です。スタイルを無効にすると反映されません。
   2. あいうえおやイロハ、漢数字もできます。
      1. 漢数字にした例です。スタイルを無効にすると反映されません。
      2. 漢数字にした例です。スタイルを無効にすると反映されません。
5. この文書にあてている CSS では、順序付きリストのマークの種類の値名を class 名にしてあります。

li

ul, ol 要素内でのリストアイテムを示します。(サンプルはulの項, olの項を参照)

プレゼンテーションモジュール(Presentation Module)

この解説を書くにあたり、戸惑ったのがこのモジュールです。XHTML は構造を、CSS は視覚的な見栄えを定義するというのに、なぜこのモジュールには「太字で表示」「より大きい文字で表示」するような物理的なモジュールがあるのか、と。

em（強調）strong（より強く強調）という論理要素があるのにあえてこれらの要素がある理由は、仕様書を読んだだけでは理解できるものでありませんでした。

This module defines elements, attributes, and a minimal content model for simple presentation-related markup:

自分なりに解釈するのであれば、明らかに視覚要素であるfontは廃止されたのにbigなどが残った以上、視覚ブラウザ以外に音声読み上げ等を考慮されて仕様に組み込まれたのでしょうか。もし正確なことがわかる方がいらっしゃいましたらメールにてご連絡ください。

XHTML1.0 / XHTML1.1 自体、まだ「真の拡張可能マークアップ言語」としては過渡期な位置にいるのではないでしょうか。XHTML2.0の草案でモジュールの分類や要素に大幅な改訂がされ、物理要素が廃止されているのを見ると、念のため物理要素は使わずにマークアップしておいたほうが良いのかもしれませんね。

b

太字での文字表示を示します。

普通の文字普通の文字太字普通の文字

big

既定値より１段階大きい文字での表示を示します。

普通の文字普通の文字大きい文字普通の文字

hr

水平方向の罫線を表します。

---

i

イタリック体での文字表示を示します。

普通の書体普通の書体イタリック体普通の書体

small

既定値より１段階小さい文字での表示を示します。

普通の文字普通の文字小さい文字普通の文字

sub

下付き文字を示します。

普通の文字普通の文字_{下付き文字}普通の文字

sup

上付き文字を示します。

普通の文字普通の文字^{上付き文字}普通の文字

tt

等幅（テレタイプ）での文字表示を示します。

普通の文字普通の文字等幅テレタイプ文字普通の文字

編集モジュール(Edit Module)

del 要素（削除）/ ins 要素（追記）はブロック要素・インライン要素いずれも内包することが可能です。

del 要素、ins 要素に使う datetime 属性の書式は、特定のフォーマットを使うよう定められています。

これをうまく利用してスクリプトと組み合わせれば、ひとつのファイルでバージョンの履歴を提供することもでき、応用の可能性が広がります。

ins

新しく挿入した部分を示します。以下にインライン要素／ブロック要素を内包したサンプルを記載します。

• 追加記述したインラインテキストのサンプルです。

• 追加記述した段落（ブロック要素）のサンプルです。

del

削除された部分を示します。以下にインライン要素／ブロック要素を内包したサンプルを記載します。

• 削除したインラインテキストのサンプルです。

• 削除した段落（ブロック要素）のサンプルです。

双方向テキストモジュール(Bi-directional Text Module)

bdo

属性値によってテキストの記述方向を示します。

• [bdo要素]は ltr 属性 で左から右へ書く文章を示します
• [bdo要素]は rtl 属性 で右から左へ書く文章を示します

フォームモジュール(Forms Module)

Basic Forms Module に出る要素は Forms Module に含まれるため、まとめて解説しています。（厳密には使える属性の値が異なるので仕様書を参考にしてください）。

form

フォームのコントロール部品をまとめる要素です。内包できる要素は form 要素以外のブロック要素です。Transitional DTD では直下にインライン要素を配置することができますが、Strict DTD ではブロック要素を配置する必要があります。

input

フォームの入力部品を定義する要素です。テキスト入力フィールド・ラジオボタン・チェックボックスなどの形は type 属性で指定します。以下にサンプルを記載します

テキスト入力フィールドinput type=“text”

 

パスワード入力フィールドinput type=“password”

チェックボックスinput type=“checkbox”

チェック(class=“checkbox”あり) チェック(class=“checkbox”なし)

汎用ボタンinput type=“button”

ラジオボタンinput type=“radio”

男性(class=“radio”あり) 女性(class=“radio”なし)

送信ボタンinput type=“submit”

 

リセットボタンinput type=“reset”

 

参照コントロールinput type=“file”

隠しコントロールinput type=“hidden”

（表面に出す必要のないアクションなど）

イメージボタンinput type=“image”

select

選択メニューを作成するフォームコントロール部品です。以下はサンプルです。

▼都道府県▼ 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 海外

option

select 要素で作る選択項目を示します。１要素=１選択項目にあたります。テキストのみ内包可能です。(サンプルはselect の項を参照)

textarea

input type=“text”の文字数を超えるような、複数行テキストの入力欄を示します。列数 cols と行数 rows の属性が必須です。テキストのみ内包可能です。サンプルは以下のとおりです。

複数行テキストの入力欄を示します。このサンプルでは readonly 属性を設定して読み取り専用にしてあります。指定した行数を超える入力文字が入っている場合はデフォルトでスクロールバーが出現します（視覚系ブラウザにおいて）。

button

汎用ボタンを示します。input type=“button” と同じ働きをしますが、テキスト以外の要素を内包できる点がinput type=“button” と違う点です。サンプルは以下のとおりです。

汎用ボタン

fieldset

フォームのコントロール部品をグループ化して意味的なまとまりをつくります。直下にlegend 要素で見出しを記述しなければなりません。サンプルは以下のとおりです。

グループ

fieldset の直下にlegend ,その下にブロック要素を内包可能です。コントロール部品自体ブロック要素に内包されている必要があるので、そのブロックの下にコントロール部品・インライン要素やテキストを内包することができます。

label

フォームのコントロール部品の説明を示します。コントロール部品の id 属性と、label 要素の for 属性が一致していなければなりません。サンプルは以下のとおりです。

名前：

ニックネーム：

legend

fieldset でグループ化されたコントロール部品群の見出しを示します。インライン要素やテキストが内包できます。サンプルは以下のとおりです。

legend サンプル

optgroup

select 要素で作る選択項目（option 要素）をグループ化します。１つ以上のoption 要素を内包する必要があります。サンプルは以下のとおりです。

▼好きなソフト▼ アイスクライマー 高橋名人の冒険島 スーパーマリオブラザース えいご漬け おいでよどうぶつの森

テーブルモジュール(Tabless Module)

Basic Tables Module に出る要素は Tabless Module に含まれるため、まとめて解説しています（厳密には使える属性の値が異なるので仕様書を参考にしてください）。

テーブルモジュールの要素はそれぞれの要素ごとのサンプルが作りにくいのでテーブルモジュールのサンプルとしてまとめてあります。

caption

table 要素内で表のキャプションを示します。

table

表（テーブル）を示します。

td

table 要素内で表のセルを示します。ブロック要素・インライン要素を内包できます。

th

table 要素内で表の見出しとなるセルを示します。ブロック要素・インライン要素を内包できます。

tr

table 要素内で表の行を示します。１つ以上の td 要素または、th 要素が必要です。

col

table 要素内で表の横列に対してまとめて属性を指定しますが、グループ化するわけではありません。

colgroup

table 要素内で表の複数の横列をグループ化します。col 要素がグループ化する意味がないのに対して、この要素にはまとまりに意味があります。col 要素を内包しなければなりません。

tbody

table 要素内で表の本体を示します。tr 要素ごと行をグループ化します。

thead

table 要素内で表のヘッダを示します。１つ以上のtr 要素を含める必要があります。

tfoot

table 要素内で表のフッタを示します。１つ以上のtr 要素を含める必要があります。tbody 要素の前に記述するものですが、多くの視覚系ブラウザでは表の本体の下に見えます。

イメージモジュール(Image Module)

img

src 属性で指定した URI の画像を埋め込みます。空要素です。src 属性並びに画像が表示できない環境に対応するためのalt 属性は必須です。以下はサンプルです。

クライアントサイドイメージマップモジュール(Client-side Image Map Module)

a

クリッカブル領域の座標と形を指定しますが、比較的新しいブラウザしか対応していません。

area

クライアントサイドイメージマップ上のクリッカブル領域の座標と形を指定し、リンク先の情報を指定します。alt 属性が必須です。

img

map 要素に関連づけをします。

input

map 要素に関連づけをします。

map

img 要素、input 要素、object 要素と連携して、クライアントサイド・イメージマップを作成します。area 要素やa 要素またはブロック要素１つ以上を内包します。

object

map 要素に関連づけをします。

クライアントサイドイメージマップのサンプル

サーバサイドイメージマップモジュール(Server-side Image Map Module)

img

クリックされた座標を受信側のサーバに送信します。

input

クリックされた座標を受信側のサーバに送信します。

オブジェクトモジュール(Object Module)

object

クリックされた座標を受信側のサーバに送信します。

param

クリックされた座標を受信側のサーバに送信します。

メタ情報モジュール(Metainformation Module)

meta

文書の制作者や連絡先など付加情報を記述したり、言語指定するなど文書の補足となる情報を示します。空要素です。content 属性は必須です。以下はhead 要素への記載サンプルです。

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

スクリプトモジュール(Scripting Module)

noscript

スクリプトの実行環境がない場合の代替として表示する内容を指定します。Strict DTD ではnoscript 直下にインライン要素を置くことができませんのでブロック要素を内容にする必要があります。

script

スクリプトを組み込みます。外部のものは src 属性で読み込むことができます。script 内に直接スクリプトを書くこともできます。

リンクモジュール(Link Module)

link

文書の関連性を示します。空要素です。

• link rel=“foo”…（順方向）現在のページからみたリンク先に対する関係
• link rev=“bar”…（逆方向）リンク先からみた現在のページに対する関係

以下は head 要素への記載サンプルです。

<link rel="stylesheet" href="http://purpr.in/common/stylesheets/default.css" type="text/css" />
<meta link rev="made" href="mailto:foo@example.com" />

ベースモジュール(Base Module)

base

文書の基準 URI を指定します。base 属性がない場合はその文書の URI が基準 URI になります。href 属性の値は絶対 URL である必要があります。また、他の link 要素など href 属性に影響する要素よりも先に記載しなければ正しく解釈できません。以下はhead 要素への記載サンプルです。

<base href="http://purpr.in/" />