Html5基礎の勉強

Html5

今WEB業界で注目され始めているHTML5について、最近本を買ったので勉強し始めました！XHTMLまでと違って、HTML5はW3Cが初期策定した訳じゃないんですね！

さらっと見た感じですが、canvasやvideo等の「プラグインを必要としないインタラクティブな要素」を使いこなす頃には、ある程度CSS3とJavaScriptを出来るようにならないといけなそうです。

ますます構造化されたマークアップ言語なので、しっかりと「意味」を理解してコーディングに望みたいものですよね。

そんな巷で噂のHTML5ですが、覚え書きも含めて、あれこれまとめてみました。

空要素

空要素とは、自身にコンテンツを持たない要素のことです。HTML4、XHTMLから引き続き使えるものが殆どなんですが、使った事ないものばかりかもｗ
html5で使用出来る空要素は下記になります。

areabasebrcolcommandembedhr
imginqutkeygenlinkmetaparamsource

より構造化するために追加された要素

新しく追加されたこれらの要素により、どんな目的でどんな内容が記載されているか等が一目で分かるようになりました。（素晴らしすぎる！）
これらの要素によって、もう構造的に意味不明な

<div id="header"></div>

<ul id="naviGation"><li></li></ul>
などを見る事は少なくなっていくことでしょう。

要素名 説明
section HTMLドキュメント内の一般的なセクション要素
header セクションのヘッダを示す要素
footer セクションのフッタを示す要素
nav ナビゲーションに特化したセクションを示す要素
article 記事やブログ投稿等の独立したコンテンツのセクションを示す要素
aside 主要なセクションと少し関連のあるセクションを示す要素
hgroup セクションの見出しを示したり、まとめるための要素
figure 図、写真、ソースコードなど主に参照されるもの、を示すための要素
figcaption figure要素で示されたもののキャプションを示す要素
mark マーク△！文章内のテキストをハイライトさせるための要素（これっていつぞやのマーキーに似てる気がする。そのうち消えるんじゃないだろうか…）
ruby ルビを振る要素
rt ルビのテキストを指定する要素…短いわｗ
rp ルビのテキストを囲む記号を示す要素
time 日付、時刻を示す要素。使いどころは様々。

フォーム機能を強化するために追加された要素

ユーザが操作するUIとなる要素が追加されました。

要素名 説明
progress 処理中の進行状況を示す要素
meter 規定の範囲内での測定結果を示す要素
details フォーム項目の説明や詳細を示す要素
summary details要素に記載された要約を示す要素
※特別にUI等は無く、脚注のように使用する事が推奨されています。
details フォーム項目の説明や詳細を示す要素
keygen フォーム送信時に、秘密鍵と公開鍵を発行する要素
output 計算結果を示す要素
※例えば、inputタグに入力された文字数を計算して、その結果を出力したり出来ます。

外部コンテンツ組み込みのために追加された要素

参照したメディアを再生したり、プラグインを組み込んだりするための要素が追加されました。

要素名 説明
canvas 図形を描くための要素
video 動画を再生するための要素
audio 音楽を再生するための要素
source 音声ファイルや動画ファイルのURL、種類を指定するための要素
embed 外部プラグインを必要とするデータを組み込むために必要な要素

意味の変更や追加、装飾の意味合いを持たなくなった要素

従来のHTMLでの意味に加えて、意味合いが追加された要素です。menuタグとか使った事あるかなぁ…。

要素名 HTML4.1
までの意味		 HTML5での意味
a href属性が必須 href属性が必須ではなくなり、同属性が無い場合は、正式なURLが入るまでの臨時スペースのような意味合いを持つ。
address どのコンテンツに対するaddress情報か不明確 配置されたセクションに対して、address情報を指定する※例えばサイト管理者の連絡先等
menu リストを示す Webアプリケーションのコマンドメニューを表す

下記は装飾の意味合いを持たなくなった悲しき要素達です。HTML5からのスタイリングは全てCSSを使って表現されます。

要素名 HTML4.1
までの意味		 HTML5での意味
b 太字、強調 強調のみに変更
hr 水平線、区切り 段落レベルでの区切りに変更
i イタリック体 声やムード、思考や特定のキーワード・用語を表現
label フォーム要素に関連付けられたキャプション OSのインターフェース基準のキャプション
small 文字の大きさを小さく、注釈を示す 注釈や細目を示す
strong 重要性や強調 重要性のみを示す（強調はbで…!)

廃止された要素

HTML5からは本格的に、視覚的な装飾はCSSで扱われるべきであるとされ、そのような要素は廃止されます…。廃止されても代替機能があるので、特定の場面で「困る！」ってことにはならなそうです。

要素名 廃止理由
acronym こんなの使ったこと…(ry、これはabbr要素に統一
applet object要素で代用可能
base font-sizeで代用
big
center text-alignで代用
dir ul、ol要素で代用可能
font font系プロパティで代用、古の要素がｗ
frame、frameset、noframe UI的に悪い影響を与えすぎなため
isindex input要素で代用
s text-decorationで代用可能
strike
u
tt font-familyで代用可能

廃止された属性

他の要素や属性、CSSで代用可能な下記の属性については、廃止されます。

関連要素 属性名 代替手法
body bgcolor background-colorプロパティ
alink a:hoverプロパティ
link a:linkプロパティ
marginbottom margin-bottomプロパティ
marginheight marginプロパティ
marginleft margin-leftプロパティ
marginright margin-rightプロパティ
margintop margin-topプロパティ
marginwidth margin-widthプロパティ
text colorプロパティ
vlink a:visitedプロパティ
br clear positionプロパティ
caption align text-alignプロパティ
col align text-alignプロパティ
valign vartical-alignプロパティ
width widthプロパティ
div align text-alignプロパティ
dl compact vertical-alignプロパティ
embed align text-alignプロパティ
table align text-alignプロパティ
bgcolor background-colorプロパティ
border border系プロパティ
cellpadding padding系プロパティ
cellspacing border, padding系プロパティ
width widthプロパティ

廃止された要素や属性は実はこれ以外にもあるのですが、当記事ではここまでといたします。

他にも実際にコーディングをする時のアウトラインの詳細や、インライン要素・ブロック要素の概念が廃止され、コンテンツモデルという概念が導入されたことなど、参考文献に豊富な量で掲載されておりましたので、興味のある方は、HTML5導入時のお供に是非いかがででしょうか。


本記事の参考文献
HTML5基礎

HTML5基礎