2 flat logo on transparent 256
2018-01-16

HTMLをXHTMLへ変換する際の注意点

Xhtml logo

業務でhtmlをxhtmlに変換する必要があり、手間取ったので共有の為記載します。

なおxhtmlは非常に稀なので、通常のWebアプリケーションを作成する場合はhtmlで問題ありません。

htmlからxhtmlに変換する際の注意

1:1行目にXHTML用の宣言を追加

<?xml version="1.0" encoding="文字コード"?>の記載が必須

2:2行目のDOCTYPEへXHTMLのバージョンの指定が必要

<!DOCTYPE ...> で XHTML のバージョンを記述します。

  XHTML 1.0 Strictの場合
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
  XHTML 1.0 Transitionalの場合
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  XHTML 1.0 Framesetの場合
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  
  XHTML 1.1の場合
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  
  XHTML Basic 1.0の場合
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
      "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

3: 閉じかっこに />を追加

xhtmlは属性を必ず引用符で囲む必要があり 例として下記のような書き方が必要になります。

以下対応例 1:metaタグ

 <meta charset="utf-8" />

2:linkタグ

  <link rel="stylesheet" type="text/css" href="../test.css" />

3:hrタグ

<hr />

4:<br/>タグ

<br />

5:imgタグ

<img src="../common/img/online_logo.png" alt="" />

6:inputタグ

  <input type="text" name="test" maxlength="3" value=""  />

4:Javascriptは//<![CDATA[ //]]>で囲む

   <script type="text/javascript">
    //<![CDATA[
        function hoge(){

        }

    //]]>

以上になります。 xhtmlはJavaなどの一部フレームワークで利用されている以外は殆ど利用されておりませんので、必要な場合のみご確認ください。

その他関連記事

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

CSSとjQueryでレスポンシブデザインに対応する方法

Ruby On RailsでSassを活用し、CSS作成を高速・効率化する

HTMLより簡潔に簡単に書ける!マークダウンの解説とコード例

前の記事
次の記事