プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

HTML5のrole属性について!

サクウェブTVはコチラ↓↓↓
サクウェブTV

role属性はHTML5で役割の明示のために追加された属性です。

「ヘッダー」「フッター」「バナー」「メインコンテンツ」など、role属性を与えると、その要素がどんな役割かを定義することができます。また、ランドマーク(目印)をつけることで将来role属性をサポートするソフトなどで機能させられる可能性を持っているそうです。

 とhttp://bost.bostudio.co.jp/2012/11/role.htmlには書いてあります。

例えばタグにid="main"と記述することで、これまでも視覚的にはその部分がメイン要素であることが確認できましたが、これは実際ただの文字列です。

メイン要素であるという「意味」までは持っていません。

しかし、HTML5で追加されたrole属性はその「意味」をつかさどるもので、以下のような指定ができます。

  • role="main":メイン部分
  • role="banner":ヘッダー部分
  • role="contentinfo":コンテンツ情報
  • role="navigation":ナビゲーション
  • role="search":検索
  • role="complementary":補足
  • role="application":アプリケショーン

でも、

HTML5におけるnavとnavigationのrole属性など、重複する部分はまだ混沌としている状況ですので、注視していきたいと思います。

だそうですよ。