「モダンWeb」を読んだ

モダンWeb

モダンWeb ―新しいWebプラットフォームの基盤技術

memo

• Webプラットフォームを構成する様々なテクノロジーのブラウザ対応状況を検索できる
  • Can I Use...
  • http://caniuse.com/

HTML

• W3CによるHTML5の仕様では、構造を表す要素として10種が定義されている

  • HTML4にも存在したもの
    • body
    • h1~h6
    • address
      • その文書に関する連絡先・問い合わせ先を表す
      • イタリック体で表示される
  • 新たに追加されたセクショニングコンテンツ
    • article
      • ドキュメントやサイトの中で、独立した部分を表す。
      • 掲示板への投稿やブログ記事、ユーザによるコメントなどが相当する。
    • aside
      • コンテンツ本体との間に弱い関係はあるが、別のものとして扱われる領域。
      • 雑誌の記事に対するサイドバーなどが相当する。
    • nav
      • ドキュメントの中で、ナビゲーションに使われる部分。
      • 他のドキュメントや、ドキュメント内の他の部分へのリンクなどが相当する。
    • section
      • コンテンツの中で、意味ごとにグループ分けされた部分。
      • 本の中の章、タブ付きダイアログボックスの中のページ、トップページの中の導入部分など。
    • footer
      • ドキュメントまたはその一部分についてのフッター領域を示す。
      • 一般的には、この領域を含んでいるセクションに関するメタデータなど。
    • header
      • ドキュメントにとってのヘッダー。
      • また、ドキュメント内の特定の領域に対するヘッダーとしても使われる。
      • ここには、見出し要素(h1~h6)によるマークアップが記述されることが一般的。
    • hgroup
      • 異なるレベルの見出し要素をグループ化する。
      • 小見出しやキャッチフレーズなどで使われる。

• 上記のセクショニングコンテンツは以下のような問題がある。

  • 古いIEだとサポートされていない。
  • 各要素の意味が曖昧。

• したがって、セクショニングコンテンツの利用はオススメされていない。

• マイクロデータ、リッチスニペット

• データ属性
  • データ属性にアクセスできるようにDOMのAPIが用意されている

var id = el.dataset['id'];

• データ属性へのアクセス（jQueryの場合）

var id = $(el).data('data');