HOME

基礎　１

要素・タグ・属性

要素とタグ

XHTMLは、ファイルの内容をわかりやすくするために、見出しや段落、画像などを1つの部品として、これらを組み合わせてXHTMLファイルを構成しています。
この見出しや段落などの部品のことを「要素（element）」といいます。これらの「要素」を、「タグ（tag）」と呼ばれる記号　<>　で囲むことで、マークアップという目印が付きます。
XHTMLで要素と言えば、タグも含めた全体を指しますが、タグを除いた部分を示す場合には、それを「内容（content）」と表現します。
ブラウザは、XHTMLファイルからこのマークアップの目印を探し出し、記述されている要素の種類を認識して、その要素に合った表示を行う仕組みになっています。

また、要素には、内容を持たないものもあります。
たとえば、画像を表示するためのimg要素や、改行のためのbr要素などがそれにあたります。
これらは空要素と呼ばれ、　<要素名></要素名>や<要素名 />　とあらわします。

属性

「属性（attribute）」は、要素の開始タグの中に指定し、その要素の性質や特性を示すために使用されます。
基本的には「 属性名="値" 」の形式であらわし、スペースで区切って複数指定することもできます。
属性名は小文字で書きます。またHTML4.01では属性の値を囲う引用符（ " または ' ）を省略できる場合がありましたが、XHTMLの場合は省略できません。

ブロックレベル要素・インライン要素

文書中で使用される要素の多くは、ブロックレベル要素かインライン要素のいずれかに分類することができます。
また、インライン要素の中には、置換要素と呼ばれる要素もあります。

ブロックレベル要素

ひとつのまとまった単位としてあらわされる要素で、見出し、段落、リスト、フォームなどの要素がこれに該当します。
一般に、その前後は改行された状態で表示されます。

• address
• blockquote
• div
• dl
• fieldset
• form
• h1～h6
• hr
• noframes
• ol
• p
• pre
• table
• ul

インライン要素

主に文章の一部としてブロックレベル要素内で使用される要素です。
したがって、前後は改行されず、同じ行に他の要素が続きます。

• a
• abbr
• acronym
• applet
• b
• big
• br
• button
• cite
• code
• dfn
• em
• i
• img
• input
• kbd
• label
• object
• q
• ruby
• samp
• select
• small
• span
• strike
• strong
• sub
• sup
• textarea
• tt
• var

指定する範囲により変わる要素

指定する範囲によりブロックレベル要素とインライン要素のいずれにもなります。

• ins
• del

状況により変わる要素

状況によりブロックレベル要素とインライン要素のいずれにもなります。

• script
• noscript

置換要素

表示される時に、その要素自体が特定のもので置き換えられるような種類の要素を指します。

• img
• input
• object
• select
• textarea

汎用属性

ほとんどの要素で共通して使うことができる属性です。

id="固有の名前"

要素に対して固有の名前（識別子）を付けるための属性です。
ひとつの文書中の複数の要素に対して、同じ名前を付けることはできません。
この属性は、スタイルシートのセレクタやスクリプトからの参照、リンク先として文書中の特定の位置を指定する場合など、文書内の特定の部分を示すために利用されます。

class="分類名"

要素に対して分類上の名前を付けるための属性です。
id属性とは異なり、ひとつの文書中で複数の要素で同じ名前を持つことができます。
また、クラス名をスペースで区切って複数指定することで、ひとつの要素に対して複数のクラス名を与えることもできます。
この属性は、主にスタイルシートのセレクタとして利用されます。

title="補足情報"

要素に対して補足的な情報を与える属性です。

dir="文字表記の方向"

UNICODEによって文字表記の方向が指定されていない場合に、要素の内容と他の属性値の基本的な文字表記の方向を指定するための属性です。

文字表記の方向

• ltr　左から右へ
• rtl　右から左へ

style="スタイルシート"　（XHTML1.0のみ）

この要素に対して適用させるスタイルシートを属性値として直接記述することができます。

lang="言語コード"　（XHTML1.0のみ）

xml:lang="言語コード"　（XHTML1.0、XHTML1.1）

lang属性は、要素の内容やそれに関連する属性値などの言語を示すための属性です。
たとえば、日本語の場合は「ja」、英語の場合は「en」のように指定します。
この属性は、指定された言語の慣習に従って、内容をより正しく表示するために利用されます。
また、内容を音声ブラウザなどで読み上げる場合に正しく発音させるためにも利用されます。

データ形式

色

RGB値またはカラーネームで指定します。

RGB値

RGB値で色を指定するときには、光の三原色である赤（R）緑（G）青（B）の配分を00～FFまでの16進数で記述します。
書式は「#RRGGBB」となります。
多くの環境で同じ色を再現したい場合は、Webセーフカラーを利用します。
WebセーフカラーとはWindowsとMacintoshのシステムパレットに共通する216色のことです。
Webセーフカラーは16進数の中で、RGB各色に「00」、「33」、「66」、「99」、「cc」、「ff」の6つの値のみを指定した216（6×6×6）色です。

カラーネーム

使用する色を色名で指定することができます。
16色が定義されています。

• ■　black（#000000）
• ■　silver（#cococo）
• ■　gray（#808080）
• □　white（#ffffff）
• ■　maroon（#800000）
• ■　red（#ff0000）
• ■　purple（#800080）
• ■　fuchia（#ff00ff）
• ■　green（#008000）
• ■　lime（#00ff00）
• ■　olive（#808000）
• ■　yellow（#ffff00）
• ■　navy（#000080）
• ■　blue（#0000ff）
• ■　teal（#008080）
• ■　aqua（#00ffff）

URI

URI（Uniform Resource Identifier）は、既存のURL（Uniform Resource Locator）の概念にURN（Uniform Resource Name）という概念も含めた、より広い意味でのデータの所在の定義方法です。

URL

ファイルを特定するする方法として、ファイルパス（住所）を指定し、位置でファイルを特定して呼び出すための文字列です。
呼び出すためのパスは、スキーム名（処理方法）、接続サーバ名、パス名から構成されています。

URLは非常に便利でしたがファイルの場所が変更されると接続できなくなるため、それに合わせてパスを書き直さなければならないという不便な面も持っていました。

URN

ファイルを特定するする方法として他の誰も使用していない唯一絶対の「名前」を使います。
URNは「名前」ですので原則的には不変であり、URNを利用すればファイルを移動したとしても「名前」がそのままである限り、ソースの書き直しは発生しません。
URNで使用する名前は特定のグループごとにまとめられ、「名前空間」という単位で管理されます。
URNでファイルを指定する場合は、「名前空間」の指定に続けて、個別のファイルを表す「名前」を記述します。
名前空間の指定には「識別子　<NID>」を記述し、ファイルの名前を「識別名　<NSS>」で記述します。
たとえば、ISDN空間にある「1-2345」-6789-0」というコードのを持つ書籍は、次のように記述します。

URIは単純にURLとURNを足しただけのものではなく、将来的な拡張性も考慮された識別方法です。
具体的には、URLの「Locator（場所）」やURNの「Name（名前）」の他に「Identifier（識別子）」でデータの所在を指定する点があげられます。
識別子を利用することで、場所や名前以外の他のリソースを追加しても対応することができます。

URIとパスの表現方法

絶対URI

一般に、自分のサイト内から他のサイトへとリンクをする場合など、他のサイトのファイルに対して使用される形式です。

http://www.uri.com/index.html

相対URI

同じサイト内で参照を行う場合など、同じディスク上のファイルを参照する場合に利用される形式です。
この場合、現在のファイルの位置を基準として、ディレクトリの階層の上下をあらわすことによって位置を示します。
相対URIの指定方法は、自分より下の階層にあるファイルの場合は、そのディレクトリ名からファイル名までを順に「 / 」で区切って記述していきます。上の階層を示すには、ひとつ上を示すごとに「 ../ 」を付けて指定します。

長さ

• ピクセル数　属性値として整数のみを指定すると、長さをピクセル数で指定したことになります
• %　属性値の数値の後に半角「 % 」を付けて指定すると、そこで利用可能な長さに対する割合で長さを示すことができます
• *　利用可能な長さが複数に分割されている場合、「ピクセル数」と「 % 」で指定された分を除いた残りの長さを、特定の比率で分配することができます。この場合の比率は、整数の後に半角「 * 」を付けて示します。「 * 」だけを指定すると、「 1* 」を指定したことになります。たとえば、表示できる幅が100ピクセルの部分に、属性の値として"40,*,2*,3*"と指定すると、まず40ピクセルの幅が確保され、残りの幅（60ピクセル）が「1:2:3」の比率（各10,20,30ピクセル）で割り当てられます。この指定方法はcolgroup要素とcol要素で利用できます。

文字列

文字列には、文字参照を含むことができます。
属性の値として文字列が使用された場合は、前後の空白文字は無視され、タブや改行は半角スペースに置き換えられます。

頻繁に利用する文字参照

• < &lt;
• > &gt;
• & &amp;
• " &quot;

名前とid

要素を識別するための名前はid属性を使用します。
id属性の値は、必ず先頭をアルファベット（A～Z、a～z）で開始し、以降にはアルファベット、数字のほか、ハイフン（-）、アンダースコア（_）、コロン（:）ピリオド（.）のみを含むことができます。

MIMEタイプ

• text/html　HTML文書（XHTML1.0で互換性を持たせた書き方）
• application/xhtml+xml　XHTML文書
• text/css　CSS
• text/jacascript　JavaScript
• image/gif　GIF画像
• image/jpeg　JPEG画像
• image/png　PNG画像

など

リンクタイプ

rel属性やrev属性を使用して、そこで示す別文書が何であるかや、別文書から見てこの文書が何であるかを示す場合に指定するのがリンクタイプです。スペースで区切って複数同時に指定することができます。

• alternate　別バージョンの文書をあらわします　media属性が同時に指定された場合はその出力媒体のバージョンであることを示します。hreflang属性が同時に指定された場合は、その言語の翻訳バージョンであることを示します。
• stylesheet　外部スタイルシートをあらわします。
• start　最初の文書をあらわします。
• next　次の文書をあらわします。
• prev　前の文書をあらわします。
• contents　目次をあらわします。
• index　牽引をあらわします。
• glossary　用語集をあらわします。
• copyright　著作権に関して書かれた文書をあらわします。
• chapter　章をあらわします。
• section　節をあらわします。
• subsection　項をあらわします。
• appendix　付録をあらわします。
• help　ヘルプをあらわします。
• bookmark　文書内でのジャンプ先をあらわします。ジャンプ先の情報はtitle属性で示すことができます。

メディアタイプ

media属性で、出力対象として想定しているメディアを指定する場合に使用します。
「 , 」で区切って複数同時に指定することができます。

• all　すべてのメディア
• screen　一般のコンピュータの画面
• tty　テレタイプ、端末、ポータブル機器等の文字幅が固定の機器
• tv　テレビ
• projection　プロジェクタ
• handheld　携帯用機器
• print　プリンタ
• braille　点字で出力をおこなうもの
• aural　音声による出力

日時

datetiime属性で日時を指定する場合に使用します。

形式　YYYY-MM-DDThh:mm:ssTZD

• YYYY　年（4桁）
• MM　月（2桁/01～12）
• DD　日（2桁/01～31）
• hh　時（2桁/00～23）
• mm　分（2桁/00～59）
• ss　秒（2桁/00～59）
• TZD　タイムゾーン（Z,+hh:mm,-hh:mm）
• +hh:mm　現地時間（UTCより先）
• -hh:mm　現地時間（UTCより後）
• Z　UTC（協定標準時）

時間をあらわす部分の前に付く大文字の「 T 」は固定です。
日本時間をあらわす場合のタイムゾーンは「 +09:00 」となります。

例　日本時間　2010年1月15日16時27分38秒
2010-01-15T16:27:38+09:00