基本構造

DOCTYPE宣言

  • 必須
<!DOCTYPE html>

ルート要素

  • html要素
  • lang属性も含める
<html lang="ja">

基本情報の記述場所

  • head要素
<head>〜</head>

エンコードの種類の指定

<meta charset="UTF-8">

ページのタイトル

  • title要素
  • 検索対象にするキーワードから書き始める
<title></title>

スタイルシートの設定

  • style要素
  • type属性を省略
<style></style>


外部スタイルシートの指定

  • link要素
<link rel="stylesheet" href="style.css">

JavaScriptの設定

  • script要素
  • type属性を省略
<script ></script>


外部JavaScriptファイルの指定

<script src="main.js"></script>

IE対策

  • このスクリプトは <head> 要素の中に入れなければいけないことに注意！
<!--[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>

基本形

<!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年に提唱された
  • 文書構造の各部やテキストの記述で何が書かれているのかを示す
  • HTML5の仕様にそって書くだけで検索エンジン最適化の面でも効果がある


セマンティック・マークアップ

  1. タグの作成
  2. 属性の拡張
新しく追加されたタグ


追加された主なタグ マークアップできる情報
<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>