HTML5の事


いまさらながらHTML5の基本の一部

HTMLのバージョンとDOCTYPE

HTML5ではDOCTYPEの記述でDTDを指定する必要がなくなったので非常にシンプル!

HTMLのバージョンとDOCTYPE
HTML1.0 1993年公開。 DOCTYPEはまだない。
HTML2.0 1995年勧告。
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML//EN”>
HTML2.x  HTML2.0を英語以外でも使用できるように改良。
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML i18n//EN”>
HTML3.2  1997年勧告。装飾用のタグ・表組が追加。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>
HTML4.0  1997年勧告。CSSを意識。装飾機能を分離する方針に改訂。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
HTML4.01  1999年勧告。4.0をマイナーチェンジ。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>
HTML5  2014年10月28日勧告。
<!DOCTYPE html>

文字コードの指定もシンプル

HTML4.01 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
HTML5 <meta charset=”UTF-8″>

要素のカテゴリ(コンテンツモデル)

(以下データはhttp://www.w3.org/TR/html5/dom.html#element-dfn-categoriesを参照)

赤文字は特定条件時

メタデータ・コンテンツ(Metadata content)

HTMLの情報・CSSリンク・外部ファイルへのリンクなどを指定
base link meta noscript script style template title

フロー・コンテンツ(Flow content)

ドキュメント内で使われるほとんどの要素
a abbr address area article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text

セクショニング・コンテンツ(Sectioning content)

章・節、見出しと内容。文章構造を明確にするための要素。
article aside nav section

ヘッディング・コンテンツ(Heading content)

見出しの要素。
h1 h2 h3 h4 h5 h6

フレージング・コンテンツ(Phrasing content)

テキストに関する要素。
a abbr area audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

エンベッディッド・コンテンツ(Embedded content)

外部リソース読み込み。動画と音楽のための要素。
audio canvas embed iframe img math object svg video

インタラクティブ・コンテンツ(Interactive content)

ユーザーとのやりとりに特化したコンテンツ。

a audio button embed iframe img input keygen label object select textarea video

article要素について

article要素:その部分だけを取り出しても独立した記事として成立する内容を扱う要素。

article要素に囲まれた記事1・記事2はその部分だけを取り出しても成立しなければならない。

article要素にarticle要素を入れ子にした場合、親のarticle要素の関連記事を意味する。

article要素はsection要素のように記事を見出しで区切るためには使わない。
記事の見出しで区切るにはarticle要素内でsection要素を使用する。

HTML5非対応ブラウザ

HTML5非対応ブラウザでは、未知の要素をdisplay:inlineとして取り扱うため、以下のCSSスタイル指定をしておく。

HTML5未対応のIE8以下に対応させる「html5shiv.js」

jsファイルをダウンロードして設置する方法

https://github.com/aFarkas/html5shiv

右側[Download ZIP]からダウンロードしてサイトのjsフォルダ等を作り中に入れる。
head内に以下コードを記述。

jsファイルをリンクで読み込み対応させる方法
head内に以下コードを記述。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL