XHTML1.1

感想おまちしてます!

HTML4.01ではタグの拡張ができない。そこで、HTML4.01で使用できる要素や属性が 使えるように、XMLの規則にしたがって定義しなおしたものがXHTML。

このページでは「XHTML1.1」をベースに進めていく。

スポンサーリンク

XHTMLをはじめる場合の注意点

タグは必ず閉じましょう

タグできちんと閉じた文書を整形式XML文書といいます。 XHTMLはXMLで記述するため、タグは必ず閉じなければなりません。 つまり下の例のようになります。

<li>リストの項目です。 ・・・はダメ! 
<li>リストの項目です。</li> ・・・はOK!

タグは小文字で書きましょう

タグは小文字でなければなりません。XHTMLではHTML4.01とは違い、大文字小文字を 区別し、かつ小文字で要素が定義されています。

属性はきちんと書きましょう

「width=100」のように書くことができましたが、XHTMLでは「width=”100″」と 書かなければなりません。また、チェックボックスの「checked」属性も、 「checked=”checked”」と書かなければなりません。

空要素も閉じましょう

改行も<br />というように書きましょう。/でとじるときに 空白を空けるのは慣習のようです。スラッシュを要素と間違えないように というおまじないなのです。

とりあえず書いてみましょう。

長々書いても仕方ないので、とりあえず書いてみましょう。 下の例はXHTML1.1の文書です。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML1.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=Shift_JIS" />
<meta name="author" xml:lang="ja" content="作者の名前" />
<meta name="description" xml:lang="ja" content="内容" />
<meta name="keywords" xml:lang="ja" content="検索のキーワード" />
<link rev="made" href="mailto:作成者メールアドレスなど" title="作成者情報" />
<link rel="Start Index" href="./index.html" />
<title>XHTML</title>
</head>
<body>
<p>これがXHTML1.1だ。</p>
</body>
</html>

2行目の「<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>」
は 「文書型宣言」と呼ばれ、「このXHTMLはこの文書(DTD)に書いてある説明に従います。」と
宣言します。DTDと呼ばれる文書には「bodyタグは1個しか書いちゃダメ」とか
「pタグの中にはdivタグは書いちゃダメ」など厳しく書かれており、作成時はこれに従って
XHTMLを書き、XMLパーサと呼ばれるツールで整形されているか確認するのが一般的だとおもいます。
ためしに、XHTMLやXML文書をIEにドラッグアンドドロップしてみてください。
文書が表示されればValid(有効ということ)です。逆に整形されていない場合は、 エラーメッセージが表示されます。

head要素直下の「<meta http-equiv=”content-type” content=”text/html;
charset=Shift_JIS”
/>」ではメディアタイプを指定してます(このメタ情報はサーバに対してのものらしい)。「application/xhtml+xml」と書かれ
ていますが、 XHTMLでは、こう書かないとValidではないため、壊れた文書とみなされてしまいます。
しかし、従来との互換性を考えて今までどおり「text/html」と書くページもたくさんあります。

その他に知っておいてほしいこと

XHTMLは現在多くのページで拡張子「html(htm)」となっています。「xhtml」のほうがかっこいいのですが、
現在使用しているIE6ではDTDエラーとなってしまうからかもしれません。
XHTMLはブラウザがまだ対応できていない部分が多いのが現状のようです。

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

ブロック要素とインライン要素の違いをご存知でしょうか。 ブロック要素は要素の前後に改行がはいり、インライン要素は 改行が入りません。ブロック要素divで囲まれた部分は前後に改行が入るため、 以下のように呪文が改行されます。

/* ソース */
エロイムエッサイム、エロイムエッサイム。<div>我は求め訴えたり!!</div>いでよ鳥乙女!!!!!
/* ブラウザでの表示 */
エロイムエッサイム、エロイムエッサイム。
我は求め訴えたり!!
いでよ鳥乙女!!!!!

インライン要素spanでは改行が行われない為、呪文は改行されません。

エロイムエッサイム、エロイムエッサイム。<span>我は求め訴えたり!!</span>いでよ鳥乙女!!!!! 
エロイムエッサイム、エロイムエッサイム。我は求め訴えたり!!いでよ鳥乙女!!!!! 

XHTMLではp要素の下にdiv要素を置けません。ブロック要素内にブロック要素だと 認めていないのでしょうかね?。

CDATAセクション

CDATAセクションとはなんぞや。CDATAセクションってのは、<[CDATA[から
始まり、]]<で終わる部分を指します。なんでこんな部分がいるの?かなと
思ったのですが、<みたいな記号を内容に使いたくても、HTMLやXMLはこの
記号をタグの始まりだとおもっちゃいます。そこでこのCDATAセクションを
使って、「このセクション内は<記号もそのまま記述できる」ようにする わけです。

しかし、CDATAセクションは私が使用しているIE6ではうまく動きません でした。また、文字参照を使用すれば、同じような表現が可能のため、 このページでは文字参照を使っております。

使い道ないなーとか思ったのですが、こういうときに役に立ちそうです。

script要素を使用して、Javascriptを書く場合、HTML4.01などでは、 script要素の内容に直に「var i =
10;」とかけました。 「大なり」「小なり」の記号もそのままかけました。これは
HTML4.01ではscript要素の中身がCDATAとして扱われるからです。
しかし、XHTMLではscript要素とstyle要素の内容は「#PCDATA」として 扱われます。

#PCDATAというのは、<などがタグとしての意味を持ってしまうものです。 ほとんどの要素の内容は#PCDATAといえるでしょう。

じゃscriptかけないじゃーん(横浜風)と思ってしまいます。 以下の例を見てください。こういうときにCDATAセクションを使用するようです。

<script type="text/javascript">
<![CDATA[
if(i < 100){
・・・
}
]]>
</script>

しかし、IE6では動きません。。。このページのフッタでJavascriptを使用し、 この文書の更新日時を表示してますが、CDATAセクションでは動かないため、 今までどおりscript要素内にコードを書いてます。

URIの指定の仕方

URIの指定の仕方について、1つ発見がありました。 例えば、「http://domain/fujihara/」をトップページとすると、このURIについて2種類の指定方法があります。それは、 「http://domain/fujihara/」と「http://domain/fujihara」です。

最後に「/」がなくても正常にページは表示されますが、 スラッシュがない場合、一度スラッシュ無しのURIでWebサーバにリクエストし、
Webサーバは「/」ありのURIでリクエストを求めます。 つまり、リンクなどにスラッシュ無しのURIを書いてしまうと、
2回リクエストをしなければならないリンクになってしまうのです。

参考 

XHTMLの書き方

リストの書き方

リストは今までli要素を閉じずに書くことが可能でした。

<ul>
<li>りんご
<li>ごりら
<li>らっぱ
</ul>

しかしXHMTLでは文書は整形されていなければなりません。 よって、以下のような書き方になります。

深さ1のリスト
<ul>
<li>赤レンジャー</li>
<li>青レンジャー</li>
<li>黄レンジャー</li>
</ul>

深さ2のリスト
<ol>
<li>深さ1です。</li>
<li>深さ1です。</li>
<li>
深さ1です。
<ol>
<li>深さ2です。</li>
<li>深さ2です。</li>
</ol>
</li>
</ol>

同じ文書内へのリンク

同じ文書内へのリンクを使用する場合、aタグのname属性を指定し、 リンク元では、「#name」をaタグのhref属性に指定します。
name属性はじき消えそうな属性です。しかし、HTML4.01の功績が偉大だったため、 なかなかすぐ消すことはできないのが現状です。
そこで現在ではXHTMLに移行するときに、name属性とid属性の2つを指定することが
多いようです。(混乱がないようにname属性とid属性へは同じ名前を付けます。)

このWEBページでは実験的にid属性のみ使用しております。 Javascriptでもidで直アクセスできる為、そうしました。
ここではサンプルとして、id要素へのリンクを乗せておきます。 idで指定できるといちいちaタグを使用しなくてもよく、
cssも書きやすくなるのでオススメです。

また、「id」なので必ず一意となる文字を指定します。

<div class="listTitle" id="list">目次</div>
<ul>
<li><a href="./xhtml.htm#n01">XHTMLとは</a></li>
<li><a href="./xhtml.htm#n02">HTMLからXHTMLをはじめる場合の注意点</a></li>
<li><a href="./xhtml.htm#n03">とりあえず書いてみましょう。</a></li>
</ul>
</div>

リンク先
<h2 id="n01">XHTMLとは</h2>

テーブルの書き方

<table class="sample" summary="ドラえもんのキャラクター表">
<caption>ドラえもんキャラクター</caption>
<colgroup span="1" align="left" width="100" />
<colgroup span="2" align="right" width="100" />
<thead>
<tr>
<th>名前</th><th>性別</th><th>特徴</th>
</tr>
</thead>
<tfoot>
<tr>
<th>合計</th>3<th>3</th><th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>のび太</td><td>男</td><td>ダメ人間</td>
</tr>
<tr>
<td>ジャイアン</td><td>男</td><td>凶暴</td>
</tr>
<tr>
<td>出木杉英才</td><td>男</td><td>万能</td>
</tr>
</tbody>
</table>

ではテーブルの要素を分解してみましょう。

table要素
テーブルを定義します。この要素の下に、以下に紹介する要素が出現 します。XHTML Basic
では、テーブル内にテーブルを置けないので注意が 必要です。また、この要素のsummary属性は、音声ブラウザが認識する
為のものです。この属性には表の概要を記述します。

table summary=”ドラえもんのキャラクター表です。” >
また、rules属性によって表の内側の罫線の表示を制御できます。 下の例ではグループ間で制御しております。

<table rules="groups" > 
caption要素
テーブルの表題を書きます。table要素内で、一番初めに指定しなければ ならず、表に1つしか定義できません。省略は可能です。 表題を表示する場所はalign属性でするようです。
<table class="sample" summary="ドラえもんのキャラクター表">
<caption>ドラえもんキャラクター</caption>

その他に、scope属性、headers属性、axis属性を使ってテーブルにラベルを付ける ことも重要です。これらのラベルから将来的にデータを抽出することが可能と なります。

col要素
テーブルの列全体を定義します。
colgroup要素
テーブルの列構造をグループ化します。col要素では全体が定義されますが、 colgroup要素では列ごとに定義が可能です。
<colgroup span="1"  align="left" width="100" />  ...1列目の定義
<colgroup span="2" align="right" width="100" /> ...2、3列目の定義
thead要素
テーブルのヘッダ部を定義します。(ヘッダ部にグループ化する) thead要素とtfoot要素はtable要素に1つずつしか存在してはいけません。 また、thead要素とtfoot要素は、tbody要素の前に書きます。

tfoot要素|テーブルのフッタ部を定義します。(フッタ部にグループ化する) thead要素とtfoot要素はtable要素に1つずつしか存在してはいけません。 また、thead要素とtfoot要素は、tbody要素の前に書きます。

tbody要素
テーブルの内容部を定義します。(内容部にグループ化する) tbody要素はtable要素に複数存在することが出来ます。
tr要素
行を定義します。
th属性
表の見出しを定義します。abbr属性で見出しのラベルとして、簡潔な代替テキストを指定しておきましょう。
td要素
セルを定義します。

注意:テーブルの線を表示しない場合、音性ブラウザが表をうまく 認識できない可能性があるそうです。

em要素・strong要素

em要素は強調という意味を持ちます。IEやNSでは斜体で表示されますが、ブラウザによっては 色を変えたりすることも考えられます。

どんなときも<em>僕が</em>僕らしくあるために。

強い強調を意味します。先に述べたem要素よりも強く強調したい場合に 使用します。標準的なブラウザでは太字になるようです。

/* ソース */
くじけそうでも<strong>必ず</strong>最後に愛は勝つ。

abbr要素・acronym要素

abbr要素は略語を表します。例えばHTTP(HyperText Transfer Protocol)など があります。ブラウザでの見た目は変わりません。

私は<abbr title="マジで恋する5行前">MK5</abbr>です。

acronym要素は頭字語をあらわします。Lan(Local Area Network)などの 頭文字をとった言葉に使われます。これもブラウザでの見た目は変わりません。

<acronym title="Local Area Network">Lan</acronym>は小さなネットワークだよね。

abbr要素はIE6ではサポートされていないようです。abbr要素とacronym要素。 どう使い分けるかは議論が分かれているらしく。次のバージョンでどうなるか わからない要素だといえます。

q要素・blockquote要素・cite要素

q要素は一行ですむような引用に使用するインライン要素。cite属性でオンラインの 文書を指定してます。

デュナンはいいました。
<q cite="http://www.a-seed.jp/index2.html">
あなたのいない未来なんて
</q>

blockquote要素は長い引用文に使用します。

<blockquote>
<p>
夕日が背中を 押してくる<br />
まっかな腕(うで)で 押してくる<br />
歩くぼくらの うしろから<br />
でっかい声で よびかける<br />
さよなら さよなら<br />
さよなら きみたち<br />
晩ごはんが 待ってるぞ<br />
あしたの朝 ねすごごすな<br />
</p>
</blockquote>

cite要素は本の名前やサイト名などを参照という意味を持ってます。

わたしが影響を受けた本のひとつに「<cite>はだしのゲン</cite>」がある。

fieldset要素・legend要素

fieldset要素は、フォームの部品をグループ化します。 fieldset要素を使用すると、フォームが枠で囲まれるため、 視覚的にも見やすくなります。さらにlegend要素をfieldset要素内で 使用すれば、その枠線に名前を表示することも可能です。

<fieldset>
<legend>アンケート</legend>
<input type="radio" name="q" />あなたはなぜ生きているのですか。<br />
<input type="radio" name="q" />一番お気に入りの音楽はなんですか。<br />
<input type="radio" name="q" />がんばっている自分を感じますか。<br />
</fieldset>

ins要素・del要素

ins要素は追加された要素を表します。下線で表示されるのが、 一般的のようです。 また、del要素は削除された要素を表します。取り消し線で表されるのが 一般的です。

私は<del>19歳</del><ins>45歳</ins>です。

sub要素・sup要素

sub要素は下付文字です。

「みゆき」のテーマソング「思い出がいっぱい」は「H<sub>2</sub>O」が歌ってます。
私はとても好きです。

sup要素は上付文字です。

爆風スランプの「涙<sup>3</sup>」にはとても励まされました。