HTML5の注目される変更点

ルビ（ふりがな）

ふりがなを指定するruby要素を使った例を示します。（別途にサイズを大きくするspanを使っている例です。）
かなと漢字かんじを使う。
これは次のように rubyのタグで範囲を指定し、その中に るびのテキストを rtのタグ(Ruby Text)で指定します。
かなと<ruby>漢字<rt>かんじ</rt></ruby>を使う。

なお ruby要素に対応していないブラウザ用に rp という要素（Ruby Parenthesis）も用意されています。
これは、逆に対応ブラウザには表示されない要素になり、一般に括弧を書きます。
かなと漢字（かんじ）を使う。
上記は、下記のようにカッコをrpで囲っていいます。このカッコが見えなければruby対応ブラウザです。
かなと<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>を使う。

IEの独自ルビ仕様　

ruby要素は以前からW3Cで検討されていましたが、IEが独自に先行して採用していました。
その仕様は、HTML5の使い方と少し異なった規則になっています。 以下は、HTML5より前のIEの仕様で書いたものです。
かなと漢字かんじを使う。
これは、rubyの範囲内をrt区切るような次の表現です。
かなと<ruby>漢字<rt>かんじ</ruby>を使う。
IEであれば、この表現もHTML5の表現も 両方対応するようです。

form関連

HTML5仕様では、<form id="FM"> と </form> の間でない所にある<input >タグでも、 inputに、formのidを設定したform属性の指定があれば、formのactionの情報送信対象にできます。
　　　　（Internet Explorer 11.0.9600.18314では対応していません。）
例えば、次のように書きます。

<input type="text" name="TT" placeholder="半角で入力ください" required="required"  form="FM">
なお、「placeholder="○○"」で○○の入力例が表示されます。 また「required="required"」は、ここに入力していないとsubmit送信ができない指定で、HTML5から使える仕様の属性です。　

meta要素のviewport指定

これはHTML5に限った指定ではありませんが、 HTML5のアナウンス時期がスマートホンやタブレットが使われ始めた時期と重なり、 PCと比べて画面が小さい機器でHTMLを閲覧することが多くなり、 それにも対応して見やすいHTMLを作らなければならなくなりました。
このようなモバイル機器でサイトを閲覧する場合、最適なサイズと拡大率を指定するのがmetaタグのviewportです。
viewportとは物理的な画面のピクセル数ではなく、表示処理に使う仮想的な画面を意味します。
例えば 実際の画面幅が320ピクセルである場合、viewportの幅が仮想ピクセルが980(初代iPhoneのデフォルト値)であると、 320の幅ように作成した作品は幅が小さくなってしまいます。
このような場合に viewportのwidth を320に合わせればちょうど良い表示になります。 つまり viewportの設定を変更するだけで、対応させたい画面に対応させることができます。
(なお、320の幅のcanvasで、viewportのwidth を640にすると、canvasはスマフォの幅の半分のサイズになります。) 

<meta name="viewport" content="width=device-width,maximum-scale=4,initial-scale=1.5,user-scalable=no" >

上記のようにmetaタグのcontent属性では次の指定をコンマで区切って列挙できます。

width 範囲 200 から 10000 で指定できます。 また数値以外で、「device-width」の指定ができます。これは、実際のデバイスの物理的なサイズを意味します。
height デフォルトの高さは width と縦横比から計算され、範囲は 223 から 10000 で指定できます。 ここでも数値以外で、「device-height」の指定ができます。
minimum-scale ユーザーが操作可能な拡大率の下限。デフォルトは 0.25 で指定可能範囲は 0 から 10.0の範囲
maximum-scale ユーザーが操作可能な拡大率の上限。デフォルトは 1.6 で指定可能範囲は 0 から 10.0の範囲
initial-scale ページが最初に読み込まれるときの拡大率。デフォルトではページを画面に合わせる。 可能範囲はの「minimum-scale」から「maximum-scale」で指定できます。
user-scalable ユーザーが拡大縮小（ピンチイン/ピンチアウト）できるかどうかをyesかnoで設定するもので、デフォルトはyesです。 数値指定も可能でその場合は yesが 1、no が 0 です。 
function updateMetaViewport(){ 
	var viewportContent; 
	var w = window.outerWidth; 
	var h = window.outerHeight;
	var ua = navigator.userAgent.toLowerCase(); 
	if((ua.indexOf("iphone") > -1) || (ua.indexOf("ipod") > -1) || (ua.indexOf("ipad") > -1)){ 
		w = document.documentElement.clientWidth; 
		h = document.documentElement.clientHeight; 
	} 
//	alert(w +"," +h);
	if(w < h){ 
		viewportContent = "width=640,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"; 
	}else{ 
		viewportContent = "width=1000,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"; 
	} 
	document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent); 
} 

//イベントハンドラ登録 
window.addEventListener("resize", updateMetaViewport, false); 
window.addEventListener("orientationchange", updateMetaViewport, false);