を見つつ、調べつつのメモ
セマンティックな要素
- 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
canvasとsvgはどう違うのか?というと svgはオブジェクトとして個々の要素を認識できる。jsでアクセスするときに個々を制御できる。 canvasは描写しているだけだからcanvas要素はcanvas要素であって、そこに描写されているものにはアクセスできない。