現時点(2022年末)でXHTMLを勉強してみたまとめ
こんにちは。
今回は勉強中の忘備録です。
現在のスタンダードはHTML Living Standardですよね。
ただ、古いwebサイトの運用を任された際など、いまだにXHTMLを使うお仕事もあるようなのです。
採用試験でXHTMLが出題されるとのことなので、渋々勉強しているところです…
早速まとめていきます！
XHTMLでの記述で気をつけるべきこと
タグは全て大文字で記述する
現在はタグの記述は大文字で記述しても問題ありませんよね。<P></P>みたいな。
XHTMLではこれは不可能らしいです。
大抵の方が普段から小文字で記述していると思います。
終了タグは省略できない
例えば、<li>などは閉じタグが省略できる要素と習いましたが、XHTMLでは省略できません。
※例 HTML Living Standardの場合
<ul>
<li>タグは全て大文字で記述する
<li>終了タグは省略できない
</ul>※例 XHTMLで記述する場合
<ul>
<li>タグは全て大文字で記述する</li>
<li>終了タグは省略できない</li>
</ul>空要素のタグは/>で閉じる
<br>や<img>、<input>など、閉じタグを記述することがなかった空要素。
(私は空要素という名前自体知りませんでした…)
私がコーディングの時使用した空要素一覧
br
hr
input
img
meta
link
属性の値は全て引用符(””)で囲む
タグに記入する属性の値は全て””で囲う必要があります。
私が読んだ文献(古いネットの文献)
HTMLでは<img src=“” height=100>
のように、height=100でもブラウザが理解してくれるが
XHTMLではheight=“100”と表示しないと文法エラーとのこと。
私は以前からそのように書いていたので特に気にしなくていいのかと思いました。
ファイル内の位置を示すには、id属性を併記
これは以前のHTMLで、id属性ではなく、name属性を使用していたことに由来する記述です。
現在のHTML Living Standardも同じルールですね！
文書型宣言
現在の記述より複雑でした。
テストでは<body>内の記述のみの出題なので省略(下記に書いてます)。
HTML5からの新要素・新ルールは使えない
現在はsectionやheader, footer, navなど、セクションを明示する要素が使えますが、これらはHTML5からの仕様なので、XHTMLでは使用できません。
これらの要素はXHTML時代では全てdivが役割を担っていたそうです。
class名の設定でわかりやすくマークアップするように心がけました。
セクション関連の要素は、section, article, aside, nav, header, footer, mainなど。
またその他の新しい要素(time, video, audio, pintureなどなど…)も使えないのではないでしょうか。
あと、a要素の中にブロックレベル要素も入れられないと思います。(今回詳しく調べませんでした…)
実際にXHTMLで記述してみた
下記のサイトを参考に文書型宣言をコピペしました。
https://www.tohoho-web.com/ex/xhtml.htm
一行目とmetaタグの文字コード(Shift_JISの部分)の値はUTF-8に変更しました。
<!DOCTYPE ...>でのバージョン指定は記述例そのままのXHTML 1.0 Transitionalにしました。
文法チェックはW3Cのvalidatorを使用しました。
https://validator.w3.org/
HTML Living Standardのチェックでも同じサイト使ってます。
文書型宣言から判断して、XHTMLの文法でチェックしてくれました！
このようにしてコーディングし直したサイトがこちら！
…と言いたいところでしたが、明日のテストに間に合いませんでしたとさ！
まとめ
XHTMLはSVGを勉強するときに触れたことはありました。
結構難しく、必死にやらなければ…と思っていたのですが、実際に書いてみると意外と大丈夫そうな気がしています。
就活でいっぱいいっぱいになっていたのでコーディング自体が久しぶり。
忘れていたことも多く、常に記述していくことは大事だと実感しました。
明日のテスト、頑張ってきます！
この記事が気に入ったらサポートをしてみませんか？