Developing in HTML5 with JavaScript and CSS3 Jump Startのメモ(1)

mva.microsoft.com

を見つつ、調べつつのメモ

セマンティックな要素

  • header
    header は、body, blockquote, fieldset, td要素、またはコンテンツ(article、aside、nav、section要素)のヘッを定義。
  • footer
    hederと同じようにセクショニングルート要素かコンテンツのフッターを定義。
  • nav
    他のページや、ページ内のポジションへのナビゲーション情報。
  • aside
    aside要素は、周りの要素とすこしだけ関連するけれども、本文とは独立したセクションを示します。広告や、nav要素の集合など、ページの主要コンテンツとは区別されるリード文やサイドバーなどで使用されます。
  • article
    投稿、雑誌や新聞の記事、ブログエントリ、ユーザ投稿コメント、インタラクティブウィジェットやガジェットなど、ドキュメント、ページ、アプリケーション、サイトの中における、完全自己完結型の記事を示します。他への依存なしに配布・再利用可能なもの。
  • section
  • figure
    本筋とは直接には関係しない図表やソースコード。 figure要素のキャプションを figcaption要素で指定することができる。
  • mark
    ハイライト。ユーザが検索したキーワードなど、利用者側の操作によってハイライトする箇所などに使用される。
  • time
    日時や時刻。

ビデオにはhgroupタグの説明もでてくるけれど、草案では採用されていたが破棄になったみたい。

フォームの要素

  • 必須項目にはrequiredをいれる。
  • imput要素にはtypeをいれる。(url text email telなど)
  • imput要素にはplaceholderをいれる。
  • imput要素にはpatternをいれる。(入力値のパターンを正規表現で指定)

audioタグ、videoタグ

要素内容にaudioタグに対応していない古いブラウザ向けの内容を入れる。対応しているブラウザは要素の内容を表示しない。 属性的には

  • src
  • controls(コントローラを表示)
  • autoplay
  • loop
  • muted(初期の音量を0に) など。

代替のソースも用意しておきたいときは sorce要素をaudioタグの間に挟んで使う。sourceタグを使うときはaudioタグにはsrc属性を入れられない。

videoタグもだいたい一緒だが、audioタグにはない属性がある。

  • poster(placeholderみたいな。動画が再生可能になるまでに表示される画像)
  • width
  • height

canvas

要素内には対応していないブラウザ向けのことを書く。 これはいつも使っているからいいかな・・・。

SVG

canvassvgはどう違うのか?というと svgはオブジェクトとして個々の要素を認識できる。jsでアクセスするときに個々を制御できる。 canvasは描写しているだけだからcanvas要素はcanvas要素であって、そこに描写されているものにはアクセスできない。