HTML5標準は公式には承認されていませんが、今すぐ使用できます。 ほとんどのブラウザはすでに新しい構造要素を理解しており、それを使用するだけで新しい
doctype
を追加でき
doctype
。
新しい
doctype
は見栄えがいいです！ 暗記できます。
<! DOCTYPE html >
* This source code was highlighted with Source Code Highlighter .
HTML5は、多くの人が聞いたことがあると思われるいくつかの構造要素を導入しましたが、まだ簡単です。
<セクション>
要素はテーマブロックをグループ化します。section
は一緒にネストできます。
<ヘッダー>
セクション、テーブルなどのタイトルが含まれています。<フッター>
通常、著作権または連絡先情報が含まれます。<nav>
通常はリンクのリストであるナビゲーション領域を定義します。<記事>
サイト上の別のブログエントリまたは記事。<脇>
通常、メインコンテンツから離れた場所にあるセカンダリコンテンツ。Internet Explorerを除く最新のすべてのブラウザーの最新バージョンでは、これらの要素はデフォルトでサポートされています。 しかし
< script >
document .createElement( 'header' );
document .createElement( 'nav' );
document .createElement( 'section' );
document .createElement( 'article' );
document .createElement( 'aside' );
document .createElement( 'footer' );
</ script >
* This source code was highlighted with Source Code Highlighter .
同じコードをGoogleからダウンロードできます。
< script src ="http://html5shiv.googlecode.com/svn/trunk/html5.js" ></ script >
* This source code was highlighted with Source Code Highlighter .
デフォルトでは、すべてのブラウザで新しい要素はインラインになるため、次のCSSを追加する必要があります。
header,
nav,
section,
article,
aside,
footer {
display: block
}
* This source code was highlighted with Source Code Highlighter .
準備が完了したら、続行します。
古典的なブログ記事を作成しましょう。
html5実装では、次のようになります。
<! DOCTYPE html >
< html >
< head >
< meta charset = utf-8 >
< title > Simple HTML5 blog </ title >
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
< style >
styles
</ style >
</ head >
< body >
< header >
blog header
</ header >
< nav >
navigation
</ nav >
< section >
< article >
< header >
Article header
</ header >
Article
</ article >
< article >
< header >
Article header
</ header >
Article
</ article >
</ section >
< aside >
sidebar content
</ aside >
< footer >
copyright
</ footer >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
実施例
PS：検証ですべてが大丈夫です！
標準バリデーターはすでにhtml5を理解しています。