XHTML1.1 ひとめぐり

最終更新日: 2008年09月14日 このエントリーを含むはてなブックマーク この記事をクリップ！

ユニバーサルな情報発進のために、正しい XHTML1.1 による文書作成方法を学びます。

ユニバーサルな HTML へ向けて

これから、XHTML1.1 による文書制作を学んでいくわけですが、HTML の理念でもお話したように、情報を発進する手段としての HTML は、なるべく環境に依存しないものでなければなりません。もし、HTML 文書の中に、レイアウトに関する情報を含めてしまったとしましょう。もし、これを「携帯電話のブラウザ」と、「パソコンのブラウザ」の両方で利用したいと考えた場合、あなたはどうするでしょうか。携帯電話のブラウザでは、出来ることは限られています。それに合わせて制作すると、パソコンのブラウザでは表示が寂しくなってしまうかも知れません。また、パソコンのブラウザに合わせて制作すると、こんどは携帯電話のブラウザでは見るに見られない表示になってしまうでしょう。結局、同じ内容でレイアウトを変えたものを二つも作ることになります。これでは、とても環境に依存しない情報とは言えません。

文書構造のみを記した HTML 文書であれば、各ブラウザが，それぞれの画面環境等に合わせた、適当なレイアウトをしてくれます。例えば、「見出し」と指定した要素であれば、あるブラウザでは大きな文字で、しかも太字で表示されてそれが見出しであることを示してくれるでしょうし、あるものはセンタリングすることによって、それが見出しであることを示してくれることが期待できます。

自分でレイアウトを指定したい場合は、HTML 文書に加えて、「スタイルシート」を用意して対応していくことになります。このスタイルシートは、当方で既にいくつか用意してあります。しかし、現実的には屡々レイアウトと構造を切り離しにくいものも存在します。それらについての対処法もこの文書では提示しています。

HTML の骨組み

それでは、徐々に HTML 文書を構成していきます。例を見ながら、どこがどのようになってなければならないかを押さえましょう。

XML ひとめぐりでも述べたように、XHTML1.1 は、XML のアプリケーション(XML を基に作られたもの、XML の応用言語) ですから、XML の文法に従わなくてはいけません。従って、文書の先頭に XML 宣言を書くようにします。また、使えるタグの種類も、DTD によって指定されていますから、必ずドキュメントタイプ宣言をしなくてはなりません。ドキュメントタイプ宣言の無い XHTML1.1 というのはありえません。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML1.1 では、ルート要素として html 要素を持ち、そのなかに head 要素と body 要素がこの順に一つずつ現れます。head 要素には、タイトルや、文書のメタ情報、他の文書との関係などの、直接ウェブページとしては表示されないものを書くことになります。文書として題名は必須です。すなわち、head 要素の中には、文書の題名を表す title 要素が一つ現れなければなりません。body 要素には、直接ウェブページとして表示される内容を書くことになります。

<html>
<head>
    <!-- メタ情報を指定 -->
    <title>文書のタイトル</title>
</head>
<body>
    <!-- ここに本文を書いていく。 -->
    <!-- この例ではまだ不完全なので後の記述をよく読むこと。-->
</body>
</html>

また、html 要素には、属性として「名前空間 (xmlns)」と「言語情報 (xml:lang)」を持たせます。名前空間は、XHTML1.1 では一意に xmlns="http://www.w3.org/1999/xhtml" と書きます。言語情報は、日本語の場合は、xml:lang="ja" と書いておきます。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

body 要素の内容に、文書の制作者等の情報を示す、address 要素を加えます。制作年月日や、制作者等の copyright 情報を書いておきます。

<address>copyright &copy; 2002 MAYAH
All Rights Reserved mayah@mayah.jp.example.com</address>

以上のものに加えて、meta 要素で文字コードも指定しておきます。ほとんどのブラウザでは、XML 宣言の文字コードや html 要素の xml:lang 属性は解釈されず、ここで指定した文字コードが解釈されます。所謂文字化けを防ぐ為にも必須です。また、MIME タイプの指定もここで一応行えます。XHTML1.1 では、MIME タイプとして application/xhtml+xml が推奨されているので、そのように書いておきます。

meta 要素の記述は少々ややこしいので、とりあえず、次の様に記述することを覚えて下さい。文字コードは、各自のものを指定して下さい。

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=EUC-JP" />

【注】：以前は、MIME タイプを text/html と書いていましたが、XHTML1.1 では、application/xhtml+xml が好ましいとされています。(see RFC3236) 私のサイトの古いリソースには、MIME タイプが text/html のままのものが結構ありますが、徐々に直していく予定です。

さて、以上のことを全て考慮して書いた XHTML1.1 文書の骨組みは、次の様なものになります。XML では、要素名の大文字小文字を区別します。要素名は、全て小文字で書かなければなりません。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=EUC-JP" />
    <title>タイトル</title>
</head>
<body>

    <address>copyright &copy; 2002 Yuha
    All Rights Reserved yuha@meirinkan.or.jp</address>
</body>
</html>

【注】実際には、もうすこしメタ情報が必要です。

見出しと段落

XHTML1.1 文書の骨組みがわかれば、今度は body 要素の中に文章を記述して行きます。

大抵の文書は、見出しと段落からなっています。XHTML1.1 では、この見出しを h1, h2, h3, h4, h5, h6 要素で、段落を、p 要素でマークアップします。見出しには、見出しレベルというものがあり、h1 ほどより上位の見出しを表すことになっています。従って、見出しは h1 から始まるべきですし、例えば h1 の次の見出しが h3 であるというマークアップは好ましくありません。

<h1>もっとも上位の見出し</h1>
    <p>……</p>
    <p>……</p>
    <h2>二番目の見出し</h2>
        <p>……</p>
        <h3>三番目の見出し</h3>
            <p>……</p>
            <p>……</p>
        <h3>三番目の見出し</h3>
            <p>……</p>
            <p>……</p>
    <h2>二番目の見出し</h2>
        <p>……</p>
        <p>……</p>

body 要素の直下にテキストが現れているのは好ましくありません。即ち、見出しや段落、もしくは後述する要素により適切にマークアップされていなければなりません。

見出しは、適切に書く様に心がけて下さい。ブラウザによっては、「次の見出し」や「前の見出し」へのアクセス方法を提供しているものもありますし、見出し一覧を作って自分の知りたい情報がどこにあるかを簡単に探せるようになっているものもあります。適切な見出しが付けられるということは、文書構造がしっかりしているということでもあります。

流儀にもよるのですが、h1 要素は文書の大見出しというイメージが強いので、一般には文書の先頭に一つだけ書くことが多い様です。この場合、あとの本文の見出しは h2 要素から始めることになります。

リスト

情報を整理して分かりやすくするときには、リストが有効です。単調な文章を読まされるよりも、リストで箇条書きにした方が、分かりやすく、見やすい文章になります。

HTML には、順不同リスト、番号付きリスト、定義リストの三種類があります。以下それぞれを紹介します。

順不同リスト

順不同リストは、単純な箇条書きを表現するときに使われます。順不同リストは、ul 要素で表します。ul 要素の内容には、リストの一項目を表す li 要素しかとることが出来ません。順不同リストの中にさらにリストを入れたい場合は、li 要素の内容に入れなければなりません。

<p>大学で必修の科目には、例えば次の様なものがあります。</p>
<ul>
    <li>線型代数</li>
    <li>解析</li>
    <li>英語</li>
    <li>第二外国語<ul>
        <li>中国語</li>
        <li>ドイツ語</li>
        <li>フランス語</li>
    </ul></li>
</ul>

特に箇条書きでなくても、リストとして纏めることが適切だと思ったものは、リストにして構いません。

番号付きリスト

番号付きリストは、箇条書きながらも、順番に意味がある時に使われます。番号付きリストは、ol 要素で表す以外は、ul 要素と同様の書き方をします。

<p>次の順番に従って調理を進めて下さい。</p>
<ol>
    <li>まずフライパンに油を大さじ２ひいて、ニンニクとしょうがひとかけ分を加えて、
        弱火で香りをだします。</li>
    <li>続いて、豆板醤を加え、さらに香りを出します。</li>
    <li>香りがたってきたら、挽き肉とお酒を加えて、強火にして炒めます。</li>
    ……
</ol>

定義リスト

定義リストは、辞書の見出し語とその説明にあたるようなリストのことです。定義リストは dl 要素で表し、その内容として、見出し後を表す部分の dt 要素、説明を表す部分の dd 要素を持ちます。

<dl>
<dt>HTTP</dt>
    <dd>Hyper Text Transfer Protocol の略。クライアントと、サーバが、
        情報をやりとりするためのルール。</dd>
<dt>FTP</dt>
    <dd>File Transfer Protocol の略。ファイルのやりとりに使われる。</dd>
</dl>

定義リストは、辞書だけでなく、色々な用途に使うことができます。例えば、会話の発言者を dt 要素で表し、その発言内容を dd 要素で表したり、質問を dt 要素で表し、その答えを dd 要素で表したりしても構いません。

以上で述べたリストは、p 要素の内容としてマークアップすることは出来ません。すなわち、一旦段落を終了させなければなりません。(この制限は、検討中の XHTML2.0 では撤廃される方向にあります。)

<p>この番組の提供は、</p>
<ul>
    <li>東芝</li>
    <li>ベネッセ</li>
</ul>
<p>です。</p>

ブロック要素とインライン要素

今まで何度も述べて来た通り、要素には、内容に含んで良いものは決まっています。例えば、p 要素の中に body 要素を持つことは出来ません。

XHTML の各要素は、大別してブロック要素とインライン要素に分けることが出来ます (これに当てはまらないものもあります)。

ブロック要素は、文書の基本骨格を形成するもので、大きなブロックとして内容を捉えます。ブロックレベル要素の内容には、インライン要素やテキストを含むことが出来ます。また、別ブロック要素を含んでよいものもあります。今まで出てきたものには、h1, ..., h6, p, address, ul, ol, dl 等が挙げられます。

インライン要素は、単語やフレーズに、意味を与えるための要素です。これらは、後で説明する em 要素や strong 要素があげられます。

インライン要素

インライン要素は、文章の一部に特別の意味を与えるための要素です。XHTML1.1 では、いくつかの要素が定義されていて、それを使用することで、文章にメリハリをつけることが出来ます。

強調

人間は、流し読みをするものです。ウェブにおいても、それは例外ではありません。人間は、文章のなかから大事な部分を拾い分ける能力を持っています。もし、語句が強調されていたら、この辺りは大事な部分だからしっかり読もう、ということになりますし、文章にメリハリもついて来ます。強調すべきところを強調した文書は、可読性の高いものになります。

XHTML1.1 では、強調には em 要素と、strong 要素が使えます。どちらも強調の意味ですが、strong 要素の方がより強い強調を表します。

<p>レッドブックによると、<em>2500 種もの生物が絶滅の危機</em>に瀕しており、
   また、今年、<strong>13 種の生物の絶滅</strong>が確認されました。</p>

用語の定義

dfn 要素は、それが用語の定義箇所であることを示します。

<dfn>複素数</dfn>とは、実数と虚数からなる数のことである。

dfn 要素に、後に述べる id 属性を振ることによって、索引の生成を簡単にしたり、title 属性でさらに説明を加えることも出来ます。

省略語の説明

ある語句が省略語であることを示すには、abbr 要素、または、acronym 要素を使います。略語を効果的に使うことは、冗長な繰り返しを避け、文章を読みやすくします。その一方、その省略語を知らない人には、文章をいたずらに難解なものにさせてしまいます。

そこで、省略語には title 属性に正式名称を記述し、略語を知らない人でも意味がわかるような文章を心がける様にしましょう。

また、acronym 要素は、頭字語の意味があります。例えば、NATO や、ASEAN 等がその代表です。しかし、acronym という言葉は、狭義にはつないで発音されるものを表し、WHO 等のつないで発音されない語句は、イニシャル語と呼ばれます。W3C の仕様書には、F.B.I. が acnonym の例として出ており、区別に混乱を招いています。

より広義の abbr 要素で全てを済ませるのが無難です。

<p><abbr title="North Atlantic Treaty Organization">NATO</abbr> は、
   <abbr title="ユーゴスラビア">ユーゴ</abbr>に攻撃をしかけた。</p>

コンピュータの用例

XHTML1.1 では、コンピュータに関係する要素タイプもいくつか定義されています。

code 要素
code 要素は、コンピュータプログラムの断片を示すときに使われます。

<p>プロセスを新たに作ったら、必ず <code>waitpid()</code> 等で
   終了ステータスを得よう。</p>
var 要素
var 要素は、プログラムの引数や、変数を表すときに使われます。

<p><code>^<var>arg1</var>^<var>arg2</var></code> とすることで
   前回のコマンドの <var>arg1</var> を <var>arg2</var> に変えた
   コマンドが実行されます。</p>
kbd 要素
kbd 要素は、利用者がコンピュータに入力する文字列を示す時に使われます。

<p>httpd をリスタートするには、
   <kbd>/etc/init.d/httpd restart</kbd> と入力します。</p>
samp 要素
samp 要素は、プログラムの画面出力を表すときに使われます。

<p>画面に <samp>Segmentation fault</samp> と表示され、コアダンプします。</p>

引用

論文等を書く場合、他の著書等からの引用は避けられません。また、引用をすることで、自分の文章がどの部分に言及しているのかをはっきりと示すことも出来ます。また、自分の書いたことと、他の人の書いたことを明確に区別することによって、著作権を尊重することにもなります。

まとまった文章を引用する場合は、blockquote 要素を使って、ブロック要素として引用します。部分的なフレーズを引用する場合は、q 要素を使って、インライン要素として引用します。どちらも、cite 属性を持ち、オンラインで参照できる文書の場合は、cite 属性に文書の URI を書いておきます。また、可能な限り、title 属性に、引用した文書のタイトルを書いておきます。

<blockquote cite="http://mayah.jp/article/" title="scratch leaf">
    <p>閣下の意味が分かった。</p>
</blockquote>
<p>何それ。</p>
<p>彼は、<q>人間はみな平等だ</q>と言ったけど、私はそうとは思わない。</p>

【注】 q 要素で引用するさいには、引用符が補われます。W3C の仕様では、q 要素の内容となるテキストには、引用符をつけないことを推奨しています。

引用の出典を表したい場合には、cite 要素を使います。blockquote 要素や q 要素で cite 属性を使っている場合には、わざわざ cite 要素で出典を表す必要はありませんが、論文等から引用した場合など、URI をもたないものから引用した場合は、cite 要素を使って出典を明示するべきです。著作権法上も、引用には出典の明示が必要であると書かれています。

<blockquote title="私の國語教室">
    <p>「現代かなづかい」の不合理と不徹底と論理的混乱は、
    「表記法は音でなく語に従ふべし」といふ全く異種の原則を導入したことから起つた。</p>
    <p><cite>私の國語教室 (福田恆存)</cite></p>
</blockquote>

ここでは、cite 要素を blockquote 要素の中に書きましたが、外に書いても構いません。

図と表

文書を書いているときに、画像や表を使って説明をした方が分かりやすいことはよくあります。ここでは、HTML 文書に、画像を埋め込む方法と、表を書く方法を紹介します。

画像を埋め込む

HTML では、画像を文書内に埋め込むには、img 要素を使います。画像ファイルは、src 属性で指定し、alt 属性で画像の内容と等価なテキストを書いておきます。alt 属性は、DTD 上必須ですので、必ず書かなければなりません。img 要素は、空要素ですので、開始タグと終了タグを合わせて記述します。また、title 属性に説明を書いておくと、画像にポインタを乗せた時にポップアップして説明を表示してくれるブラウザもあります。

<p><img src="./cab.jpg" alt="スーパーカブ" title="懐かしきスーパーカブ" /></p>

img 要素は、インライン要素ですので、body 要素直下に書くことは出来ません。ここでは段落としてマークアップしていますが、後に述べる div 要素の内容として書く方法もあります。これらのマークアップのどれを使うかは、文書の持つ意味によって決定しなければなりません。

【注】：特に代替テキストのない画像の場合は、alt="" としておきます。alt 属性の内容が空でも alt 属性は明示しなければなりません。

表

表を表すには、table 要素でテーブルの範囲全体を表します。

試験成績を表にする場合等、項目見出しや、合計欄のように、ヘッダ、フッタとして扱うと都合のよい物があります。これらは、table 要素中にそれぞれ、thead 要素、tfoot 要素として表します。それ以外の表の要素は、tbody 要素の中にいれて表します。

thead, tfoot, tbody 要素の中に行を表す tr 要素を、そしてその中にセルを表す td 要素を入れていくことで作成します。見出しとして機能するセルは、td 要素ではなく、th 要素としてマークアップします。

尚、テーブルにはそのテーブルの要約を示す summary 属性を付けるようにし、また、テーブルのキャプションを、caption 要素で表すようにします。

この説明では多少分かりにくいかと思われるので、例を示します。

<table summary="中間考査結果">
<caption>中間考査結果</caption>
<thead>
    <tr><th>氏名</th><th>国語</th><th>数学</th><th>英語</th><th>合計</th></tr>
</thead>
<tfoot>
    <tr><th>平均点</th><td>45.2</td><td>32.1</td><td>44.8</td><td>122.1</td></tr>
</tfoot>
<tbody>
    <tr><td>開成太郎</td><td>80</td><td>90</td><td>80</td><td>250</td></tr>
    <tr><td>武蔵花子</td><td>77</td><td>95</td><td>55</td><td>227</td></tr>
    <tr><td>麻布一郎</td><td>32</td><td>80</td><td>64</td><td>176</td></tr>
    <tr><td>筑駒洋子</td><td>56</td><td>42</td><td>72</td><td>170</td></tr>
    ……
</tbody>
</table>

この例は、次の様な表を構成します。

中間考査結果
氏名 国語 数学 英語 合計
平均点 45.2 32.1 44.8 122.1
開成太郎 80 90 80 250
武蔵花子 77 95 55 227
麻布一郎 32 80 64 176
筑駒洋子 56 42 72 170
…… …… …… …… ……

行のグループ化は、tbody 要素で可能ですが、列をグループ化したい場合は、colgroup 要素、col 要素を用いて行います。

col 要素は、セルを列単位でまとめるために使い、colgroup 要素は、さらに意味的なまとまりを与えるために使います。col 要素、colgroup 要素とも、span 属性を持ち、適用する列の数を調節することが出来ます。これらの要素を使う場合は、span 属性も含めて算出される列の数と、実際の列の数が一致しなければなりません。

また、col 要素は、空要素ですので、開始タグと終了タグをまとめて書くことが出来ます。

<table summary="中間考査結果">
    <caption>中間考査結果</caption>
    <colgroup class="students-name"></colgroup>
    <colgroup class="students-scores">
        <col span="3" class="student-score" />
        <col class="studnet-total-score" />
    </colgroup>
    <thead>
        <tr><th>氏名</th><th>国語</th><th>数学</th><th>英語</th><th>合計</th></tr>
    </thead>
    <tfoot>
        <tr><th>平均点</th><td>45.2</td><td>32.1</td><td>44.8</td><td>122.1</td></tr>
    </tfoot>
    <tbody>
        <tr><td>開成太郎</td><td>80</td><td>90</td><td>80</td><td>250</td></tr>
        <tr><td>武蔵花子</td><td>77</td><td>95</td><td>55</td><td>227</td></tr>
        <tr><td>麻布一郎</td><td>32</td><td>80</td><td>64</td><td>176</td></tr>
        <tr><td>筑駒洋子</td><td>56</td><td>42</td><td>72</td><td>170</td></tr>
        ……
    </tbody>
</table>

以下特に変わった感じはうけないと思いますが、列に対しての意味づけがしっかりと行われたことになります。

中間考査結果
氏名 国語 数学 英語 合計
平均点 45.2 32.1 44.8 122.1
開成太郎 80 90 80 250
武蔵花子 77 95 55 227
麻布一郎 32 80 64 176
筑駒洋子 56 42 72 170
…… …… …… …… ……

挿入と削除

電子テキストは、追加や削除が大変簡単に行えます。これは、電子テキストのメリットの一つですが、その一方、あるテキストを引用したら、引用部がいつの間にか改定されていた、ということも十分起こり得ます。

HTML では、文章を追加したり削除したりする際には、その部分を ins 要素やdel 要素を使って追加された、削除されたという事実を表すようにすべきです。

どちらの要素も、cite 属性を持ち、追加、削除された理由をしめす文書を参照できます。簡単な理由ならば、title 属性を使ってその理由を説明することも可能です。また、削除日時、追加日時を、datetime 属性を用いて表すことが出来ます。

<p>Linux のパフォーマンスは、
   <del title="最近のベンチマークの結果より" datetime="2002-07-07T22:00:00+09:00">
   商用 UNIX には劣っている</del>
   <ins datetime="2002-07-07T22:00:00+09:00">ローエンド商用 UNIX に勝るが、
   ハイエンドの商用 UNIX ほどではない</ins>。</p>

多少 datetime 属性の書き方が厄介かも知れません。YYYY-MM-DDThh:mm:ss((+|-)hh:mm) の形式で、最後の hh:mm は、GMT からの時差を表現します。日本時間ならば、+09:00 としておきます。

テキストの整形

HTML 文書の表示に関する指定は通常はスタイルシートを使って行わなければなりませんが、互換性や実用上、いくつかのテキストの整形手段が残っています。これらの要素は、特に文章に意味づけを与える為のものではありませんが、デフォルトスタイルシートで、例えば上付、下付文字を表現するにはこれらの要素を使わざるをえません。従って、互換性等を考えた上で使用するのは、現実的な観点から見ると、責められるものではありません。

上付き文字と下付き文字

数学の式等で使われる上付き文字、下付き文字は、それぞれ sup 要素、sub 要素としてマークアップします。これは、上付き、下付きであることに意味があることがありますので、このようにマークアップせざるを得ません。

どちらの要素も、インライン要素です。

<p>y = x<sup>2</sup> + 2x + 1 を x に就いて解け。</p>
<p>a<sub>1</sub> + a<sub>2</sub> + ... + a<sub>n</sub> = S<sub>n</sub> とおく。</p>

水平区切り線

水平区切り線は、その名の通り、文章の区切り線を表す要素です。長い文章では、適宜区切り線を入れると、文章が読みやすくなります。

水平区切り線は、hr 要素で表します。これはブロック要素であり、空要素でもあります。

<p>……と、一郎は思った。</p>
<hr />
<h2>一夏の思いで</h2>
<p>台風もそれ、空に晴れ間ものぞかせた。一郎は、母の墓の前に来ていた。……</p>

強制改行

文章に強制的に改行を入れたい場合は、br 要素を使います。br 要素は、インライン要素で、空要素です。br 要素を使う場面は殆ど有りませんが、強いて使う場所をあげるなら、同じ段落と考えられる会話の後の強制改行 (日本語を書き下す時、通常会話の後は改行を入れます。)、address 要素内の強制改行等があります。address 要素内にはインライン要素しかもてないので、仕方なく br 要素で強制改行しているという感があります。

<p>「まってよ！」<br />
と、手を伸ばして追いかけた。</p>

<address>
東京都文京区本郷<br />
東京大学理学部情報科学科<br />
copyright &copy; 2002 All Rights Reserved
</address>

【注】読みやすいからといって、テキストの途中に改行を入れるのは考えものです。広い画面では、画面を効率的に利用できなくなりますし、狭い画面では、折り返された後に中途半端なところで改行されて、文章の可読性を損ないます。この様な場合は改行を入れずに、ブラウザの幅を各自が調節することによって、可読性を確保させるようにします。

整形済みテキスト

既に整形が行われているテキストの場合、pre 要素としてマークアップすることで、改行や空白がそのまま表示されるように出来ます。また、通常モノスペースフォント(等幅フォント)で表示されます。プログラムを記述したりする際には便利かもしれません。

pre 要素はブロック要素で、内容にはインライン要素しか持てません。また、整形済みであることが前提ですので、タブをいれてはいけません。タブは、幅が可変なことから、整形済みとは見なされません。

好ましくないテキストの整形

XHTML1.1 では、b 要素(太字)や i 要素(斜体)等の論理的意味の無い要素がまだ残っています。これらは、俗に物理要素と呼ばれ、文章に論理的意味を与えないことから、使用は好ましくないとされています。上記の sup, sub, hr, br, pre は、物理要素とは呼ばれませんが、それに近いものです。これらの要素も、現実的なマークアップの観点からは、使わざるを得ないこともあるかもしれません。それを認識した上で使ったのであれば、責められるものではありません。しかし、もう一度それが本当に太字や斜体でなければならないのかを考えて見てください。強調には em 要素や strong 要素があります。強調でもないのに慣用的に太字になっているのは、例えば数学のベクトルがありますが、それでも b 要素を使うには抵抗があります。

HTML4.01 transitional や、XHTML1.0 transitional には、悪名高き font 要素が存在します。これは、フォントを設定するために用いられたものですが、論理的意味を全く持たない、物理要素の代表選手の様な要素です。font 要素は、使用すべきでない要素の一つです。XHTML1.1 では、font 要素は定められていませんので、使用した場合は、その時点で XHTML1.1 として不適合になります。

一般に物理要素と言われているのは、b, i, tt, big, small 要素であり、通常これらの要素は、使用するべきではないとされています。

id と class の付加

これまでに示したような要素だけでは、文書の表現能力に乏しいと感じられることがあります。例えば、ここは注釈としてマークアップしたいと考えても、注釈に相当する要素は XHTML1.1 にはありません。ウェブページを制作していると、その他、色々な要素を使いたくなります。

これは、HTML が簡単に記述できるように要素数をある程度に絞っているからです。しかし、それでは表現能力に乏しいので、class 属性、id 属性を使って、要素に付加的な意味を与えていきます。例えば、ある段落が注釈であることを明示したい場合は、例えば <p class="note">……</p> と note クラスを設定して、ここが注釈であるという意味を、付加的に与えます。同じ要素を沢山のクラスに所属させたい場合は、スペースで区切って記述することも出来ます。

<p class="note">注：class 属性を記述したところで、段落は段落でしかない。</p>
<p class="conversation sakura">さくら「本当にあなたは困った人ね。」</p>

class 属性は、複数の要素に、共通する属性を与える為の属性と考えることが出来ます。

一方、id 属性は、その名の通り要素を identify (特定) するものです。id 属性には、文書中に同じ値は一度しかかけませんが、その制約により、要素を特定することが可能になります。id 属性が振られた要素は、a 要素でアンカーを指定してジャンプすることが出来ます。これも、要素を特定しているからこそ出来ることです。a 要素でアンカーを指定する場合は、例えば#ID のように、# のあとに ID 属性値を付けたものを a 要素の href 属性に書きます。

<p><dfn id="dfn-dfn">dfn</dfn> 要素に id を振って、索引を簡単に作ることが出来る。</p>

<ul>
    <li><a href="#dfn-ul">ul</a></li>
    <li><a href="#dfn-li">li</a></li>
    <li><a href="#dfn-dfn">dfn</a></li>
</ul>

div と span

今まである要素に付加的に意味を与えるには class 属性や id 属性を使えばいいのですが、これまで述べてきたどの要素とも当てはまらず、しかし、意味を与えたいというものが存在します。そのような場合、汎用的なブロック要素、インライン要素である div 要素や span 要素を使います。

div 要素や span 要素は、それ自身意味を持たない要素です。従って、実際に利用する際には必ず class 属性、もしくは id 属性で、論理的な意味を与えてやるようにします。

<div class="section">
    <h2>節</h2>
    <p>節を表現するのに、div 要素と section クラスを使って表現できる。</p>
</div>

<p class="note"><span class="note-symbol">【注】</span>
   このように class を設定すれば、スタイルシートがない環境では【注】が表示されるし、
   スタイルシートがある環境では、スタイルを設定して【注】の字を消すことも出来る。</p>

class 属性で、物理的な意味を与えないように注意して下さい。例えば、class="center" や、class="red" などとしてスタイルでセンタリングや、文字色を赤にするのは、好ましくありません。もし、文字色を変えたいと思ったときに、red というクラスが障碍になります。例えば class="caution" や、class="attention" などとして、論理的な意味を与えます。

尚、p class="attention" 等とするのは構いませんが、class 属性等に対するスタイルシートは、テキストブラウザでは通常反映されません。意味的に強調をしていると考えれば、中身を em 要素としてマークアップするなどの配慮が必要です。span や div を多用して、class 属性や id 属性にスタイルを与えるのは、好ましい方法では有りません。

Leave a Reply