blog.wonder-boys.net - javascript, actionscript and more

rss feed

HTML5（マークアップ）についてのメモ

さすがに、そろそろ勉強せねばと思い。

Doctype

1

<!DOCTYPE html>
  • モダンブラウザでは、を標準モードのトリガーとして解釈する。つまり、IE6であれ、HTML5のDOCTYPEは標準モードになる。

主な新しい要素

  • header
  • nav
  • article
  • section
  • aside
  • footer

■header

ページのヘッダーの要素。
article内で使用する場合はarticle内でのヘッダー要素。

1
2
3

<header>
  <p>header information</p>
</header>

■nav

ナビゲーション要素。
グローバルナビゲーションまたは、ローカルナビゲーションに使用する。

1
2
3
4
5
6
7

<nav>
  <ul>
    <li>navigation</li>
    <li>navigation</li>
    <li>navigation</li>
  </ul>
</nav>

■article

記事要素。articleはそのものだけでも、コンテンツとして成り立つ。
従って、article内にheader、footer要素を使用することもできる。

1
2
3
4
5
6
7
8
9
10
11

<article>
  <header>
    <p>header information</p>
  </header>
 
  ～
 
  <footer>
    <p>footer information</p>
  </footer>
</article>

■section

ひとつのまとまり（セクション）の要素。
h1～h6と併用しネストすることでコンテンツの関連を表す。

1
2
3
4
5
6
7
8

<section>
  <h1>title</h1>
  <p>contents, contents</p>
    <section>
      <h2>title</h2>
      <p>other contents, other contents</p>
    </section>
</section>

■aside

いわゆるサイドバー。
主となるコンテンツ内で使用するのは好ましくない。
主のコンテンツとは違ったコンテンツに使用する。

1
2
3
4
5
6
7
8
9
10

<aside>
  <p>side contents</p>
  <nav>
    <ul>
      <li>navigation</li>
      <li>navigation</li>
      <li>navigation</li>
    </ul>
  </nav>
</aside>

■footer

ページのフッターの要素。
article内で使用する場合はarticle内でのフッター要素。

1
2
3

<footer>
  <p>footer information</p>
</footer>

HTML5要素

その他の追加要素

  • time （日付を表す要素）
  • menu （ツールバーや右クリック時などのメニューを表す要素）
  • dialog （対話形式のテキスト）
  • progress （プログレスバー）
  • mark（他の部分から参照されている、という意味合いが強いテキストの強調）
  • command（ユーザによって呼び出されるコマンドボタン。menuとともに用いられる。）

なんだかよくわかりません。

フォーム

■placeholder

テキストフィールドに文字を表示させることができる。すごい。

1

<input type="text" placeholder="検索文字を入力して下さい">

■autofocus

画面を表示した際に自動的にフォーカルされる。これもすごい。

1

<input type="text" autofocus>

■autocomplete

入力時の自動補完のオン、オフを切り替える。（on, off, 指定なしの3タイプ）

1

<input type="text" autocomplete="on">

また、onにした場合に補完する文字列を指定することもできる。

1
2
3
4
5
6
7

<input type="text" name="greeting" autocomplete="on" list="greetings">
 
<datalist id="greetings" style="display: none;">
  <option>Good Morning</option>
  <option>Hello</option>
  <option>Good Afternoon</option>
</datalist>

どうやら、id値とlist属性で結びつけるようです。
cssで表示を消さないといけないところがなんとも・・・。

ほかにも、

  • inputのtypeが増えた。
  • 入力値のバリデーション
  • output要素の追加

などなど面白そうな機能満載。
これらは、対応ブラウザがまだ少ないので、実用的ではないけど
また改めてしっかり調べたい。

詳解! HTML 5と関連APIの最新動向 – 新タグ&API編

IEについて

通常、IEではHTML5のタグは認識されない。
認識させるには、createElementでノードを強制的に認識させる必要がある。

1

document.createElement('section');
  • DOTYPEを書けばIE6でも標準モードになる。

FireFoxについて

■FireFox2の場合

新要素内にブロック要素が入らない。
終了タグを無理やり補完してしまう。

1
2

<section></section> //補完してしまう
<p>contents</p>

新要素を認識させるには

上記のIEやFireFoxでしっかりと新要素を認識させるには
htmlをxmlとして配信すればいいらしい。
つまり「application/xhtml+xml」でということ。

しかし、IEはだめらしい。
やっぱりcreateElementするらしい。

HTML 5 を application/xhtml+xml で配信すれば Fx2, Fx3 でも問題なく解析される

css

追加要素を使用する際は、明示的にブロック要素にする。

1
2
3

article, aside, dialog, figure, footer, header, legend, nav, section {
  display: block;
}

しっかりと認識されないのかな？

削除された属性

name
【img、form、a】
※代わりにid属性を使用する

accesskey
【textarea、a、area、button、input、label、legend】

summary
【table】

size
【hr、input、select】

まとめ

もうだいぶ、HTML5でマークアップされたサイトが増えてますね。
一方でブラウザの実装がまだ足りない部分の多いようで、実際に広まっていくのは正式な勧告があってからなんでしょうかね。

マークアップの部分では、やはりsectionとかarticleのくくりがどこまでかというのが人によってまちまちなようでした。
header要素やfooter要素をsection毎につけている人もいれば、section内では使わない人もいるし、sectionが外かarticleが外かとか。
このへんは時間をかけて調べていかないといけないかもしれません。
また、HTML4.01やXHTMLと比べてソースが少しスッキリするような気もしました。

とはいえ、フォーム要素に面白そうな機能が増えていたりもするので、普及するのが楽しみです。
僕も実際にマークアップしてみよう。

参考サイト

HTML 5 における HTML 4 からの変更点
HTML 5 の新要素
HTML 5 の新要素の解析のされ方で気をつけるところ
最新ブラウザのHTML5タグへの対応状況をまとめてみた
HTML 5では「article」タグでページの「本文」が取れる
HTML5/CSS3は最新Webブラウザでどれだけ実装が進んでいるか？

Related Entries

Comment

name