HTML5でサイトを作ってみる。

■ 外部リンク関連

a要素

指定した場所に飛ばす際には、name属性を使用していましたが、HTML5ではid属性を利用できるようになりました。
また、HTML4.01以前はインライン要素として機能していましたが、HTML5以降からは機能が拡張され ブロック全体に対して利用したり、href属性を利用しない場合はプレースフォルダーを意味する要素になるなど様々な変更が行われています。

href属性を利用しない場合はプレースフォルダーとして機能する

HTML5以降からは、href属性が必須属性で無くなりました。
href属性のないa要素は、プレースフォルダーであると規定されています。
<section>
<ul>
	<li><a href="link.html">アンカー01</a></li>
	<li><a href="link.html">アンカー02</a></li>
	<li><a>アンカー03</a></li>
	<li><a>アンカー04</a></li>
	<li><a>アンカー05</a></li>
</ul>
</section>

ping属性

a要素からハイパーリンク先を参照する際に、リンクを辿ったという情報をping属性で指定したURLに対して送信することができます。 また、大ルのダウンロード数の計測などにも利用できるでしょう。

とはいえ、pingにはCGIなど、集計用のプログラムが別途必要になりますし、 ブラウザがping属性に対応していないと効果は上がりません。

img要素

HTML5では、alt属性の役割が大きく変化しました。
今までは指定した画像の代替テキストとされていましたが、HTML5では、img画像が表現しているものを正確にテキストベースで表現することが求められます。 しかし、alt属性は必須属性ではなくなったという変更点もあります。

これらの変更はアクセシビリティの向上が目的です。
読み上げブラウザを利用する人がいたり、コンテンツを理解できない検索エンジンのロボットもいます。 このalt属性は、画像が見えないユーザーのことも考慮しているのです。

embed要素

主としてプラグインファイルを組み込むのに使います。

<p>
	<embed src="./img/flash_sample.swf" width=""></embed>
</p>

video要素

これまでのように、ビデオを再生するのにQuickTimeやFlashプラグインを利用することなくビデオを表示、再生します。

しかし現時点では、HTML5のWeb標準としてビデオ・コーデくの規定は行われていません。
そしてブラウザごとに対応しているビデオ・コーデックも異なります。そのため、Web制作者がvideo要素を使用する場合、 複数のブラウザ向けに複数のファイルを用意しなければいけないという問題があります。

video内で使用する属性

[src]
ファイルの場所を指定します。
[controls]
動画の再生や停止、音量コントロール
[autoplay]
動画をオートプレイにします。
[autobuffer]
ユーザーが必ず動画を再生すつであろうと想定されるときに指定します。
それによりブラウザが優先的に動画ファイルをダウンロードし、バッファしておくこととなります。
[poster]
JPGやPNGなどの画像を、再生が始まるまでの一時的な表示画像として利用します。
[loop]

audio要素

使い方、メリット、デメリットはvideo要素とほとんど同じです。

source

video要素やaudio要素の子要素として利用します。 通常、videoやaudioはひとつのファイルしか指定できません。 そこで、source要素を使って複数の用をを指定します。

canvas

Flashの代替となる動的な図形描画機能です。
Javascriptでの描画となり、idなどを指定してその要素にどのような描画をするか指定します。

iframe

HTML文書内に特定の領域を指定し、そこに別のHTML文書を組み込みます。

[src]
HTML文書を指定します。
[srcdoc]
その属性地そのものに、HTMLを含めた内容を記述できます。 [seemless]
フレームとして読み込まれたHTML文書が、あたかも1つのHTML文書であるかのような挙動をします。
従来はJavascriptなどを使って実現していた機能がHTMLだけで可能になります。
(c) 2010-2014 naoko okihara