HTML5に書き換えるには
これまでHTML4.01で書いていたうちのWEBサイト、これを（全部ではないけれど）HTML5に書き換えました。
理由はいろいろあるのですが、コードの単純化と汎用性（いろいろなブラウザに対応できる）ですね。
HTML5のメリットとしてよく上げられるマークアップとか新しいタグは、うちのサイトではあまり活用しませんので。
当初「面倒かな？」と心配したのですが、意外に簡単だったのでメモ的に残しておきます。
※うちのサイトの場合なので、どのサイトでもこれで100％OKというわけではありません。
ー
書き換えコード
ヘッダ周り
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html prefix="og: http://ogp.me/ns#" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
↓
<!DOCTYPE html> <html prefix="og: http://ogp.me/ns#" lang="ja"> <head> <meta charset="shift_jis">
OGP付きの場合。また文字コードはこの後UTF-8に変更しました。
ー
不要個所（削除）
<meta http-equiv="Content-Style-Type" content="text/css">
type="text/css"
type="text/javascript"
タグ中の文字削除は、前後空白を考慮すること。
ー
閉じタグ
/>
↓
>
一部XHTMLある可能性から（結果的にはうちのサイトには存在せず）
ー
画像リンク
align="middle"
↓
style="vertical-align:middle"
画像横にテキストがある場合には変更が必要（”middle”は一例）
おそらく前後タグも変える必要があるので注意。
ー
アンカー
<a href="#1">
<a name="1">
↓
<a name="s1" id="s1">
アンカーネームはアルファベットからが良い。nameとidを併記。
但しワーニングなので後日あらためて。
ー
その他うちのサイト特有
BODY
<body style="color: black; background-color: rgb(204, 255, 153); background-image: url(gif/b_yg5.gif);" alink="#009900" link="#003300" vlink="#003300">
↓
<body>
CSS化しCSS側に記述。（というか、これまで何故CSSで書かなかったのだろう？ツール上の制限だったかな？（忘））
ー
TABLE
<table style="text-align: left; margin-left: auto; margin-right: auto; background-color: #ffffcc;" cellspacing="10">
↓
<table>
CSS化しCSS側に記述。
ー
確認作業
きちんとHTML5化できたかどうかは、チェックサイトで確認を。
私はこちらでチェックしています↓
The W3C Markup Validation Service
W3C's easy-to-use markup validation service, based on SGML and XML parsers.
validator.w3.org
ー
コメント