HTML5―基本形
基本形
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> </body> </html>
論理構造の記述とセマンティックWeb
論理構造の記述
- 見た目で判断できるようにではなく、論理構造で読んでも意味が通じるようにする
- 音声ブラウザで読み上げても、意味が通じるようにする
セマンティックWeb
- コンピュータが情報を細かく判別できるようにつくる
- WWWの創始者である「ティム・バーナーズ・リー」によって1998年に提唱された
- 文書構造の各部やテキストの記述で何が書かれているのかを示す
セマンティック・マークアップ
- タグの作成
- 属性の拡張
新しく追加されたタグ
| 追加された主なタグ | マークアップできる情報 |
|---|---|
| <article> | 独立したコンテンツ |
| <nav> | ナビゲーション |
| <aside> | 補足・関連情報 |
| <section> | 一般的なセクション |
| <hgroup> | 見出しのグループ |
| <header> | ヘッダー |
| <footer> | フッター |
| <figure> | 図表 |
| <figcaption> | 図表のキャプション |
| <time> | 日時 |
microdataによるメタデータの付加
対応ブラウザ
Internet Explorer 8 以下に新しいタグを認識させる
- IE9は含まないと条件付ける
DOM（Document Object Model）で記述
<!--[if lte IE 9]> <script> document.createElement('article'); document.createElement('nav'); document.createElement('aside'); document.createElement('section'); </script> <![endif]-->
ライブラリを利用する
<!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
ライブラリが機能していることを確認する
- IE Testerで下位バージョンの表示を確認する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>TEST</title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> A <section>B</section> C </body> </html> </center>
ブラウザで表示【 Chrome 】
