ChangeToHTML5
既成のサイトをHTML5へ移行する方法
HTML4.01で作成したサイトを、HTML5で作成したサイトにすることが出来ます。
ココでは既成のサイトを修正して、HTML5で作成したサイトに移行する方法を述べたい
と思います。
DOCTYPE宣言
まず最初にやることは、HTML5の記述に書き換えて行く前に、現在のWebページの
DOCTYPE宣言をみてHTMLのバージョンを確認することです。
HTML4.01やXHTML1.0のバージョンには、Strict、Transitional、Framesetの3通り
のモードがあります。
● HTML4.01の場合：
DOCTYPE宣言は、下記のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 (ア)//EN"
"http://www.w3.org/TR/html4/ (イ).dtd">
この時、
Strictモードの場合は、 （ア)＝何も書かない、空白、 (イ)＝strict
Transitionalモードの場合は、 （ア)＝Transitional、 (イ)＝loose
Framesetモードの場合は、 （ア)＝Frameset、 (イ)＝frameset
と記述されています。
● XHTML1.0の場合：
DOCTYPE宣言は、下記のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 (ア)//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1 -(イ).dtd">
この時、
Strictモードの場合は、 （ア)＝Strict、 (イ)＝strict
Transitionalモードの場合は、（ア)＝Transitional、 (イ)＝transitional
Framesetモードの場合は、 （ア)＝Frameset、 (イ)＝frameset
と記述されています。
HTML4.01やXHTML1.0では、DTDを明示するために、DOCTYPE宣言の記述が必須です。
DTD(=Document Type Definition)とは、マークアップに使用できるタグや属性を定義した
もので、「文書型定義」とも呼ばれています。
HTML5ではDTDを明示する必要はありません。
しかし、ブラウザが下位互換モードで表示するのを防ぐため、DOCTYPE宣言の記述は
必須となります。
現在のところ、IE、Chrome、Safari、Firefox、Operaなどの主要ブラウザでは、DOCTYPE宣言の記述がない場合は、下位互換モードに切り替わります。そのため、HTML5ではDOCTYPE宣言の記述は必須とします。その場合にHTML5標準準拠モードでの表示となります。
HTML5でも、Webページの全体は「ルート要素」と呼ばれ、<html> 〜 </html>でマークアップします。これまでと同じです。
また、WebページをXHTML で作成していた場合は、HTML5ではxmlnsは不要です。
例えば、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"html://www.w3.org/TR/xhtml 1/DTD/xhtml 1 -transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>microdataについて</title>
・・・・略 ・・・・
</head>
<body>
・・・・略 ・・・・
・・・・略 ・・・・
</body>
</html>
● これを、HTML5に書き直すと、以下のようになります。
⇓⇓⇓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>microdataについて</title>
・・・・略 ・・・・
</head>
<body>
・・・・略 ・・・・
・・・・略 ・・・・
</body>
</html>
のようになります。とても簡単でスッキリとした形ですね！
その他の要素について
◆ ルート要素
ルート要素と呼ばれているWebページのソース全体は、これまでと同じ<html> 〜 </html>
でマークアップされます。
◆ 基本情報の記述場所
ページのタイトルやエンコードの種類やstyle設定などを記述する場所は、これまでと同じ<head> 〜 </head>の中に記述します。
◆ エンコードの種類の指定方法
Webページが文字化けしないようにするために、<head>の中には<meta>でエンコードの種類を指定します。HTML5では、シンプルに<meta charset="utf-8">とします。
主なエンコードの種類は、Unicode（UTF-8)、シフトJIS、EUC、JIS の4種類で、それぞれのcharset属性の値は順番に、utf-8、shift_jis、euc-jp、iso-2022-jp となります。
＊ <meta>はWebページに関する付加的な情報を記述するためのタグです。<meta>で指定できる主なメタデータ（付加的な情報）は、エンコードの種類の他に、ページに関する説明や、制作者に関する情報、キーワードなどを指定できます。
その場合name属性で情報の種類を、content属性で内容を記述します。
例えば、
name属性が、author、generator、description、keywords、application-name の時、それぞれの情報の種類は順番に、ページの制作者、ページの制作に使用したツール、ページに関する説明、ページに関するキーワード、ページのWebアプリケーション名 となります。
最後の「application-name」は、HTML5で追加されたname属性の値です。Webアプリケーションを作成する場合に利用します。
◆ ページのタイトル
これまでと同じようにページのタイトルには<title> 〜 </title>
でマークアップします。これはHTML4.01やXHTML1.0 では省略は出来ませんでしたが、HTML５では、HTMLソースを他のWebページに読み込んで利用する場合など、上位階層でタイトルが指定済みの場合などは省略することが出来ます。
また、タイトルの指定は、文字化けを防ぐために、エンコード指定の後に記述します。
◆ スタイルシートの設定
これまでと同じように<head>の中に<style> 〜 </style>でマークアップして記述します。
ただし、<style>の中に記述したtype属性は値が「text/css」の場合、HTML5ではスタイルシート
はCSSで記述していることが前提なので、type属性を省略することが出来ます。
また、外部スタイルシートを指定する<link>においても、同様にtype属性の指定を省略できます。
例えば、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>microdataについて</title>
<style type="text/css">
a {color:#018abc}
・・・・略 ・・・・
</style>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
・・・・略 ・・・・
この時、HTML５においては、type="text/css" を省略して、下記のように
することが出来ます。
⇓⇓⇓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>microdataについて</title>
<style>
a {color:#018abc}
・・・・略 ・・・・
</style>
<link rel="stylesheet" href="style.css" />
</head>
・・・・略 ・・・・
＊ JavaScriptの指定の場合
JavaScriptを指定した <script> においても、type属性の指定を省略することが出来ます。
省略した場合、type属性の値は「text/javascript」として処理されます。
また、外部のJavaScriptファイルを読み込んでいる場合にも、type属性は省略することが
可能です。
さて、以上で、Webページの基本情報をHTML5の記述に書き換える作業は完了です。
完全移行のための最終仕上げ
上記のように、Webページの基本情報をHTML5の記述に書き換える作業を完了させたら、
最終的に、HTML５への移行を完全なものにするためには、コンテンツのマークアップを次の
２つの側面から確認します。
１．HTML5で廃止されたタグや属性の確認
HTML5で廃止されたタグや属性を使用していたらそれを削除して、HTML5の新しいタグや
属性を使って記述し、正しく修正、変更します。
コンテンツのマークアップを確認する時、人間の手作業で一つ一つ確認するのは大変なので、
ツールを利用します。
そのツールとは、HTMLの文法チェックを行う、W3Cの「バリデータ」というものです。
このバリデータを開き、「Validate by Direct Input」タブを選択します。
ここではチェックしたいWebページのHTMLソースをコピー＆ペーストで入力して、
「Check」をクリックします。
すると、HTML5の文法にしたがってチェックが行われます。
問題がなければ、「This document was successfully checked as HTML5」と表示され、
HTML５のWebページとして文法上の問題は無いことがわかります。
また、UTF-8のエンコードで保存されたページかどうかが確認できなかったというエラーが
生じた場合は、次の残りの２つを確認するとよいでしょう。
◯ サーバー上で公開しているページの場合は、URLを指定してチェックする。その場合は
「Validate by URL」タブを選択し、URLを指定して「Check」をクリックする。
◯ HTMLファイルをアップロードしてチェックする。その場合は「Validate by File Upload」
タブを選択し、HTMLファイルを指定して「Check」をクリックする。
上記、いずれの方法でもチェック結果に問題がなければ、緑色のバーで
「This document was successfully checked as HTML5！」と表示されます。
そして、注意が1つだけ表示されますが、特に問題はあありません。
その注意とは、Resultの欄に「Passed ，１warning(s)」と表示されます。
もし、廃止されたタグや属性を使用していた場合は、エラーが検出され、赤色のバーで「Error found while checking this document as HTML5！」と表示されます。
エラーの内容は、ページ下部の「Validation Output」で確認することが出来ます。
２．HTML5で定義変更のタグや属性の確認
HTML5では、タグや属性の定義の変更により、マークアップによって示される文書の論理構造
がHTML4.01やXHTML1.0の時とは変わっているものがあります。
そこで、定義の変わったタグや属性を使用していないかどうかを確認し、必要に応じてマークアップを修正します。
残念ながら、W3Cの「バリデータ」では論理構造のマークアップが正しく行われているかどうか
までチェックする力はありません。
マークアップした箇所の内容が見出しなのか、段落なのか、それを正しく判別することが出来ないのです。
そこで、その判別は、制作者自身でチェックする必要があります。
■■ 定義の変わったタグの例
１．コピーライト
<address> ⇒⇒ <small>
HTML5では、<small> が「但し書きや注釈」を示すものと定義され、
警告や免責、コピーライト、ライセンス要件 などを示すのに利用します。
一方、<address>は、「連絡先の情報」を示すものと定義され、著作者の名前やメールアドレスをマークアップするのに使用することになりました。
そこで、<address>でマークアップしたコピーライトを、<small>でマークアップするように修正します。
（注意）<address>に適用されていたスタイルシートの設定が<small>では適用されなくなっているので、<address>では「中央揃え」だったのが、<small>では「左揃え」に表示されます。
従って、コピーライトを元のように「中央揃え」にするために、<address>に適用していたスタイルシートを<small>に適用します。
そこで、address { 〜 } と指定した適用先を small { 〜 } に変更します。
ところが、それでも、桁揃えが変化しないのは、<address>に適用していた属性の「 text-align 」が <small> に対しては機能しないためです。
「 text-align 」はブロック要素のみに機能するプロパティ（属性）ですので、ブロック要素である<address>には機能しますが、インライン要素である<small>には機能しません。
従って、addressに適応していたスタイルシートに、属性「 display:block 」を追加して、<small>でマークアップした部分をブロック要素として表示するように修正します。
【 例 】◆マークアップ部分の修正
・・・略・・・
<!-- フッター -->
<div id="footer">
<address>Copyright (c) Michoka ,ALL rights reserved.</address>
</div>
この時、マークアップの修正は、下記のようになります。
⇓⇓⇓
・・・略・・・
<!-- フッター -->
<div id="footer">
<small>Copyright (c) Michoka ,ALL rights reserved. </small>
</div>
◆ 次に、スタイルシートを修正します
/* フッター */
div#footer { --- 略 ---}
address {font-size : 0.75em;
font-style: normal;
text-align: center
}
これを下記のように追加・修正します。
⇓⇓⇓
/* フッター */
div#footer { --- 略 ---}
small {font-size : 0.75em;
font-style: normal;
text-align: center;
display: block
}
以上で、HTML5への移行 終わり
