コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

XHTMLというものがあるらしい、きっとこれは…

頭に"X"の文字がつくとなんでもいやらしく感じる

こういった発想に至るのは脳が毒されているとしか考えられませんね。もう僕はダメです。
いや、一般的にXはポルノのレーティングだし、僕は正常なのでは…。そうだ、正常だ!!

といったわけで、今回は頭に"X"のつくHTMLをやっていこうと思います。頭のXはXMLのXなので今回もいやらしい要素は皆無です、残念。厳密にはそうだと言えない部分もあったりするけども細かいことを気にしてはいけない。

XHTMLについて

XHTML
Extensible HyperText Markup Language(エクステンシブル ハイパーテキスト マークアップ ランゲージ)、略記・略称:XHTML (エックスエイチティーエムエル)は、SGMLで定義されていたHTMLをXMLの文法で定義しなおしたマークアップ言語である。その仕様はHTMLと同じくW3Cによって勧告されている。

XHTMLについて、よくわからないことを書いていますがざっくり言うとHTMLの自由な書き方を厳格化したものだよといった感じです。厳格化するとコンピュータが文書構造を読み取りやすくなるよというメリットが有ります。あと、共同で作業とかするときに文法を制限することで品質を均一化することができたりとかあったりなかったり。うん、よくわかんないけど書き方のお作法が厳格化されているHTMLだよでいいと思った。

早速いじります

書き方が厳格化されているのでルール通りに書いていないものは受け付けてくれません。
例えば、htmlで書くみたいなノリでこんなのを書くと…。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>さくら</title>
</head>
<body>
  <p>どんなに苦しい時も 君が笑っているから<br>挫けそうになりかけても 頑張れる気がしたよ</p>
</body>
</html>

f:id:andron:20170129233336p:plain
「まじかよ、コーディングでエラー出るのかよっ!」といった感じにエラーがでます。わあ、厳格。HTML でもこういった感じのエラーは表立って出てきませんが、ルールを守って書いてないのはタブーだから気をつけようね。


というわけで適当に書くとまともに表示してくれないのでルールを覚えます。
① 冒頭にXML宣言とドキュメントタイプを記述
 XHTML使いますよの宣言みたいなものです。書かないと多分ブラウザがHTMLとして勝手に判断するものなんだと思ってます(いい加減なことを言う)。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XML名前空間宣言
 XML的な要素があることの宣言です。今回はその詳細について触れることがないので完全におまじない要素です。

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

③ 要素名・属性名は小文字で書く
 大文字・小文字は区別の対象なので、全部小文字で書きなさいというやつです。

<P ID="aiueo">あいうえお</P>

 上のやつみたいな書き方はダメだよという感じだそうです。

④ 要素の終了タグを必ず書く
タグはちゃんと閉じないといけませんよみたいな話です。brタグなんかは<br />にしなくちゃダメらしい。面倒くさい。

⑤ 属性値はダブルクォーテーションで囲み、属性名は省略できない
下のやつみたいな書き方はだめらしいよ。

<input type='checkbox' checked />

その他細かいルールがいくつかあるけどもこの辺で……。
そんなわけで上の場合では9行目のBRタグが指摘されているので以下のように修正します。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>さくら</title>
</head>
<body>
  <p>どんなに苦しい時も 君が笑っているから<br />挫けそうになりかけても 頑張れる気がしたよ</p>
</body>
</html>

よし、なんとかなった。
この例だとあまりメリットを感じないけどXMLっぽいことをやるにはいいらしい、どう使っていけばいいのだろうね。