HTML5 2015.06.17（公開）

HTML5コーディングの基礎知識まとめ

【要点】HTML4とHTML5の違い

ドッグタイプがシンプルになりました。
SVGの活用ができるようになりました。SVGとはベクター形式の画像フォーマットです。拡大、縮小しても高品質な画像を表示することが可能です。
『header』、『footer』などを活用することになりました。
また、アウトラインを考慮して適宜『section』タグなどを活用することになりました。
その他、HTML5から採用された新しいタグによって色々な表現が可能になりました。
<br />が<br>になりました。
<img />が<img>になりました。

HTML5から追加されたタグ

headerタグ、footerタグ

<header>	ヘッダー部分のセクションに用います。
<footer>	フッター部分のセクションに用います。

セクショニング・コンテンツ

セクショニングコンテンツとはアウトラインの概念を持っています。アウトラインとは階層構造を指します。HTML5ではこのアウトラインを意識して構築する事が重要です。
アウトラインの定義としては見出しが始まる時点で始まります。

<section>	「章」「節」「項」といった分類で、一つのセクションである事を示します。例えば見出し要素（h1、h2等）で始まるひとかたまりの部分を定義する時に用います。※<section> は「見出しを有する」と思っていた方が良いです
<nav>	ナビゲーションを示すセクション要素グローバルナビ、サイドナビなどナビゲーションの部分に用います。
<article>	記事であることを示します。ページ内のメインとなる記事全体にarticle要素を用いるのも良いと思います。
<aside>	補足説明、関連情報、メイン記事とあまり関係のない情報などのコンテンツの時に用います。

その他のコンテンツ

<main>

<main>タグは原則として<body>タグ内に1つしか使うことができません。注意としてはnav、article、aside、header、footerの中に含める事ができません。また、セクショニング・コンテンツではないのでアウトラインを形成しません。もう一つ注意としてはIE対策でmainにdisplay:blockの記述をおすすめします。

コンテンツで参照する図板を掲載する時に使います。

図板のキャプションを定義する時に使います。

<mark>

<strong>、<em>、<b>要素と同様。文章内で目立たせたい箇所を定義します。
それでは、それぞれの違いを下記よりご確認ください。

<strong>	より強調したい場所に活用
<em>	強調したい場所に活用
<mark>	関連性を参照する際に重要度の高い場所に活用します。
<b>	効果的な目的のために注意をひきたいテキストに活用します。

参考：http://yoshikawaweb.com/element-em-strong-mark-b-difference.html

<time>

正確な日付や日時の場合は<time>を活用します。

<data>

漢数字などコンピュータが認識しづらい語句の場合に活用します。
例）<p>今年で<data value="50">五十</data>歳になります。</p>

タスクの進捗状況を定義します。
属性に関しては下記をご覧ください。

任意属性
value=""	現時点の進捗状況
max=""	全体の作業量
form=""	フォームとの関連付け

例）<progress value="50" max="100">50%</progress>
参考：http://www.tagindex.com/html5/form/progress.html

<meter>

全体量が決まっているものの使用割合を定義します。

必須属性
value=""	計測結果の値
任意属性
min=""	ゲージの最小値
max=""	ゲージの最大値
low=""	低い領域
high=""	高い領域
optimum=""	最適な値
from=""	フォームとの関連付け

例）<meter value="50" min="0" max="100">50%</meter>
参考：http://www.tagindex.com/html5/form/meter.html

語句にふりがなを付けたい時に定義します。例）<ruby>岡田<rt>おかだ</rt>花子<rt>はなこ</rt></ruby>

<canvas>タグは図形を描く際に使用します。HTML4以前では図形を表示する際には作成された画像を貼り付けておりましたが<canvas>タグを活用することでグラフやゲームグラフィックなどの図形をすばやく表示が可能です。

<video>

HTML4以前では動画を掲載したい場合、Flashを活用するのが主流でしたが、Flashは閲覧ユーザーのブラウザにFlashをインストールしなければ閲覧できない状況でした。HTML5から採用された<video>タグはユーザーにプラグインをインストールしてもらうことなく動画の再生が可能です。

<audio>

HTMLファイル内で再生する音声ファイルを定義できます。

上記の<video>、<audio>要素内で複数のメディアファイルを再生候補として定義が可能です。

備考や操作手順などの詳細情報を示す際に活用します。

<details>内で『要約』『説明文』として定義が可能です。

<datalist>タグはフォームの入力欄で入力候補となるデータリストを定義する事が可能です。つまり入力欄をクリックすると入力候補として提案されます。

フォームのfrom要素内に記述し、データが送信される際に鍵ペアを生成し、秘密キーをローカルに保存、公開キーをサーバーへ送信します。

フォームのfrom要素内に記述し、計算結果を出力します。

HTML5で廃止された要素

CSSで置き換えられるべき要素	フレーム関連要素	あまり利用されない要素
basefont	frame	acronym
big	feameset	applet
center	noframes	isindex
font		dir
strike
tt

HTML5　タグ設計の参考

HTML5でコーディングする際は『アウトライン』を理解する必要があります。
本で例えると本の中には複数の『章』があり『章のタイトル』があります。
まず、この『章』自体をセクションとして分別します。
また、『章』の中に『節』があり、『節』も同様にセクションとして分別して階層構造を作成します。

HTML5でタグの参考例

参考HTMLソース

<body>
<header>
	<div id="header-inner">
		<p><img src="logo.png"></p>
		<nav>
			<ul>
				<li>リンク1</li>
				<li>リンク2</li>
				<li>リンク3</li>
			</ul>
		</nav>
	</div>
</header>
<nav id="gnav">
	<ul>
		<li>Gナビ1</li>
		<li>Gナビ2</li>
		<li>Gナビ3</li>
		<li>Gナビ4</li>
		<li>Gナビ5</li>
	</ul>
</nav>
<article>
	<h1><img src="main.jpg" alt="信頼と実績"></h1>
	<nav class="column3-list">
		<ul>
			<li>コンテンツA</li>
			<li>コンテンツB</li>
			<li>コンテンツC</li>
		</ul>
	</nav>
	<section>
		<h2>新着情報</h2>
		<dl class="news-list">
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
			<dt>20150616</dt><dd>テキストテキストテキストテキストテキスト</dd>
		</dl>
	</section>
	<aside>
		<p><img src="banner01"></p>
		<p><img src="banner02"></p>
		<p><img src="banner03"></p>
		<p><img src="banner04"></p>
	</aside>
</article>
</body>

アウトライン確認ツール

HTML5のアウトラインチェックツール

https://gsnedders.html5.org/outliner/

Google Chromeのアドオン

HTML5 Outliner

Dreamweaver CS5はHTML5に対応していない

Dreamweaver CS5はHTML5に対応していない為、アップデートする必要があります。

Dreamweaverでエラーが発生した時は

下記のサイトで紹介されています。

参考：http://wp2.trojanbear.net/720.html

HTML5が古いIEでも認識されるように対策する

HTML5の記述はIE7、IE8で閲覧するとCSSが効かなくなります。
他の方法もありますが今回は手っ取り早い方法をご案内します。
下記を追記

<!-- [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->