HTML5のメモ

2010年8月19日

色んなサイトさんで記述方法が書かれてきているHTML5ですが、ざっくりまとめていこうと思います。
ざっくりすぎてわかりにくいと思いますけどー!

■宣言は1行でOK

ざっくりとした話、

<!DOCTYPE html>

を記載するだけでHTML5になる。(大文字小文字どちらでもOK)
ブラウザでは標準準拠になるので書いても古いブラウザ向けにも問題ないと思います。

head部分のお決まりで必要になるもの

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="" rel="stylesheet" type="text/css" media="all">
<script src="" type="text/javascript"></script>
</head>
 

■新要素

HTML5では新要素が適用できます。
bodyとかheadとか使ってたみたいに使えます。
なので、

<div id="header"></div>

みたいなdivで囲む記述をすることは必要ありません。

html記述

<header></header>

と書いてbodyみたいにダイレクトでCSSで指定させることができます。
#とか.とかは必要ありません。

CSS記述

header { background-color: #ccc; }

↓新要素(他にもあります。
header (ヘッダー)
footer  (フッダー)
section  (項目のまとまりごとに)
nav    (ナビ)
article   (記事)
dialog   (チャット等のログ)
audio   (音)
video   (動画)
canvas  (描画)

■新要素はIEでは認識してくれない

そんな場合は、下記を書いてあげて、新要素の適用をさせておきます。
↓htmlで反映させたい新要素を書く。

<script type="text/javascript">
    document.createElement( 'header' );
    document.createElement( 'section' );
    document.createElement( 'nav' );
    document.createElement( 'aside' );
    document.createElement( 'footer' );
    document.createElement( 'article' );
</script>

8/26追記:
IE対応させるための一行のgooglecodeちゃんがありました。なので、上もわかりやすい方法のひとつですが、下記の1行で済ませることも可能です。
※CSSの前に記述。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ちなみに、section や nav といった HTML5 の新しい要素タイプのうち、ブロックボックスとしてレンダリングしたいものについて CSS で明示する手順も必要。

section, nav, article, aside, hgroup, header, footer, figure, figcaption {
  display: block;
}

br要素も、スラッシュとかいらなくなった!

<br>


HTML5のタグは簡単になったというものの、DWでタグ候補が出ないから割と不便なので、タグライブラリーをサクっと登録。ありがとうございますー!

■HTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた

ということで、色々他にもちょいちょいまとめていこうと思います。
自分のサイトもそろそろhtml5にしよー!

■参考サイト:
WordPress で HTML5 を書くための準備
HTML5 へ移行
他。


タグ: ,