HTML5のテクニックです。

HTML5

HTML5への移行方法

HTML5に移行する場合は解説サイトで変更点を調べて修正し、最後にエラーチェックで問題がない事を確認してください。
また、HTML5で廃止されたものもあるので、それらを使用している場合は修正が必要です。
HTML5リファレンス
Another HTML-lint 5(HTML5のエラーチェック)

HTML5の基本

HTML5の基本構造

HTML5の基本構造は以下のようになります。
最初にDOCTYPE宣言を書き、次に大枠のhtml、その中にheadとbodyを書きます。
さらにbody内にheaderやfooterなど、様々な要素や文字を書いて組み上げます。

<doctype>
<html>
<head></head>
<body>
<header></header>
<footer></footer>
</body>
</html>

DOCTYPE宣言

HTML5のDOCTYPE宣言は従来とは異なり、記述方法が統一されています。
HTML5タグリファレンス(!DOCTYPE html)

<!DOCTYPE html>

htmlとlang

HTML5ではhtmlとlangを以下のように記述します。
HTML5タグリファレンス(html)

<html lang="ja"></html>

head

HTML5のヘッダでは使用言語の指定は省略され、全体的に非常にシンプルになっています。
HTML5タグリファレンス(HEAD)
HTMLタグリファレンス(META)
HTMLタグリファレンス(LINK)
HTML5における、W3C準拠のマークアップ

<head>
メタ情報の指定:meta要素
ページタイトル:title要素
関連ファイルの指定:link要素
</head>

HTML5の変更点

変更されたHTML要素

HTML5ではfontが廃止されていますが、以下を参考に代替修正が可能です。
また、ファビコンのコードなども若干変更されているので修正が必要です。
廃止された要素と属性
HTML5タグリファレンス(header)
HTML5タグリファレンス(footer)

  1. font:<span class="フォントのスタイルを指定するクラス"></span>
  2. favicon:<link rel="icon" type="image/vnd.microsoft.icon" href="ファビコンのパス">

追加されたHTML要素

HTML5で追加された新要素です。
従来ではheaderやfooterはdiv idで利用していたと思いますが、HTML5からはHTML要素として利用する事ができます。
また、HTML5では図形の描画やScriptの非同期利用と言った事も可能になっています。
HTML5リファレンス(canvas)
HTML5 の動画

  1. header、footer:<header></header>、<footer></footer>
  2. async、defer:<script src="" async defer></script>
  3. canvas:<canvas></canvas>
オンラインPC館