HTML5

仕様

マークアップ

文書の基本構造


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

1行目にDOCTYPE宣言

htmlタグを文書のルートにする

headタグ内に文書の情報を入力する

bodyタグ内に文書の本文を入力する

DOCTYPE宣言

シンプルな記述で最新の仕様定義を指定できるようになった。


<!DOCTYPE html>

文字コード宣言

meta要素にcharset属性が定義された


<meta charset="utf-8" />

新規タグ

id/classで多用されていた要素がタグになった


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

タグ	解説
header	サイトの最上段領域を表すために使う要素。サイト名やロゴ、サイト概要を記述するために用いると良い。
footer	サイトの最下段領域を表すために使う要素。著作権表記やフッターナビゲーションを記述するために用いると良い。 header, footer要素はセクション毎にも使うことができる。
section	セクション(区分)を表す要素。見出しとそれに付随するコンテンツのセットを記述するために用いる。
article	該当ページのメインコンテンツにあたる領域を表す要素。
aside	補足時記事を表す要素。セクションの本題からは逸れたコンテンツを記述する。
nav	ナビゲーションのセクションを表す。おもにサイト内へのリンクや、あるいは外部サイトへのリンクに用いる。
time	日付や時間を表す要素。スクリーンリーダーからでも判別できるように明示する。日付の場合はyyyy-mm-dd, 日時の場合は hh:mmのように日時フォーマットに従って記述する。
mark	本文と関連性を持つ部分をハイライトするための要素。例：検索結果のページで検索文字をハイライトする。

HTML5タグをつかったマークアップ例

bodyタグ内の全体構造


<header>
  <h1>...</h1>
  <nav>...</nav>
</header>
<div id="content">
  <article">
  </article">
  <aside">
  </aside">
</div><!--/#content-->
<footer>...</footer>

header

ページやセクションの導入部分をにあたる見出しや、ナビーゲーションをグループ化するために使います。


<header>
  <h1>ページのタイトル</h1>
  <nav>...</nav>
</header>

footer

ページ最下部の著作権情報や関連リンクなどをグループ化するために使います。


<footer>
  <nav>...<nav>
  <p><small>Copyright 2011 hi0a.com</small></p>
</footer>

nav

ページ内の主要なナビゲーションリンクをマークアップするために使います。

内部にul,liタグでリスト化する場合が多いです。


<nav>
  <ul>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
  </ul>
</nav>

section

章や節などの文章のまとまった範囲をグループ化するために使います。

内部にul,liタグでリスト化する場合が多いです。


<section>
  <h2>1. ～について</h2>
  <section>
    <h3>1-1. 序論</h3>
    <p>...</p>
  </section>
  <section>
    <h3>1-2. 調査内容</h3>
    <p>...</p>
  </section>
</section>

article

記事として独立したコンテンツをまとめるために使います。

sectionに似ていますが、独立したコンテンツとしてより大きい範囲を指し示す場合が多いです。


<article>
  <section>
    <h2>1. ～について</h2>
    <section>
      <h3>1-1. 序論</h3>
      <p>...</p>
    </section>
    <section>
      <h3>1-2. 調査内容</h3>
      <p>...</p>
    </section>
...
  </section>
</article>

figure, figcaption>

画像や図表をとその説明文をマークアップするために使います。


<figure>
  <img src="..." />
  <figcaption>青空と白い雲の写真</figcaption>
</figure>

クロスブラウザ(Internet Exproler)対策

InternetExprolerではHTML5で追加された新規タグに対して、スタイルシートを定義することができない。

JavaScriptによって新要素を生成し、スタイルシートが効くように設定する

html5ready.js


(function(){
  var els = ['section', 'article', 'hgroup', 'header', 'footer', 'nav', 'aside', 'figure', 'mark', 'time', 'ruby', 'rt', 'rp'];
  for(var i=0; i<els.length; i++){
    document.createElement(els[i]);
  }
});


<!--[if IE]><script type="text/javascript" src="html5ready.js"></script><![endif]-->

html5ready.css


section, article, hgroup, header, footer, nav, aside, figure, mark, time, ruby, rt, rp{
  display:block;
}

Web Storage

キーと値を組み合わせた情報を蓄積するAPI

Cookieと違って大容量のデータを扱うことができる。

クライアント側にデータを保持させることでアクセス毎の通信料を減らし、サーバ負荷の低減が期待できる。


  localStorage.setItem("value", 'aaaa');

  var v = localStorage.getItem("value");

  localStorage.removeItem("value");

  localStorage.clear();

デモ

Web Database

Web Storageでは扱うことのできない複雑な構造のデータを扱う技術

MySQLやSQLiteのようなデータベース構造を扱うことができるようになる。

Web Workers

JavaScriptの処理をバックグラウンドで実行する技術

Web Sockets

サーバ通信のAPI

チャットのようにサーバ側からクライアント側へ送る双方向通信

サーバ側がWebSocketsに対応している必要があるので割愛

Glocation API

位置情報を取得するAPI

リンク・リレーション

link要素は文書全体についての情報を記述

「次のページ」「目次」など文書同士の関連性やメタ情報を示す

利用例


<link rel="alternate" />

<a rel="alternate" href="/">link文字</a>

alternate
archives
auther
bookmark
external
first
help
icon
index
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
stylesheet
sidebar
tag

HTML5策定スケジュール

参考

http://www.html5.jp/