Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

フロントエンドエンジニアに転身して4ヶ月。ようやく、HTML5プロフェッショナル認定試験Level.1に合格する事ができました。
改めてWebの基礎知識を学び直すことでWebの仕組みについて理解が深まり、よりHTMLマークアップが楽しくなりました。
今回はWebエンジニアの初心者〜中級者を対象にHTML5によってHTMLマークアップの何が変わったのかを中心に記事を書きたいと思います。

HTML5でHTMLを記述するという事

HTML4以前では、見た目を変更できる要素(big要素やfont要素など)が存在していましたが、HTML5では見た目の定義はCSSの役割とし、HTMLは情報の意味付けと構造化を行う事を役割と位置付けました。
HTMLでは、後述している「コンテンツモデル」「カテゴリー」「セクション」「アウトライン」という概念を用いて、マークアップに意味と構造を与えます。
HTML文書に適切な意味を与える事により、GoogleなどのクローラーがHTML文書を理解する事を助け、結果的にユーザーに適切なWebサイトを提供する事に繋がります。また、HTML文書の構造を理解する必要がある人達や音声案内などいくつかの支援技術を必要とする人に大きく利点をもたらします。
そのため、HTMLに意味を持たせる事、いわゆるセマンティクスに記述する事は、Webサイトをユーザーに閲覧してもらうためにとても重要な事です。

コンテンツモデルとカテゴリーの概念

コンテンツモデルについてはご存知の方も多いかと思いますが、HTML5から新たに作られた概念で各要素ごとに「その要素の中にはどの要素を定義してよいのか」を決めるものです。
また、HTML4以前では各要素はブロックレベル要素とインライン要素の2つに分類されていましたが、HTML5からは全部で7つのカテゴリーに分類されます。また、1つの要素が複数のカテゴリーに属している事もあります。
コンテンツモデルとカテゴリーを理解する事はHTML文書を正しく構造化するために重要です。

カテゴリーの種類

  1. フローコンテンツ(a, h1~h6, div, spanなど多くのHTML要素)
  2. メタデータコンテンツ(meta, link, title, style, script要素など)
  3. セクショニングコンテンツ(article, aside, nav, section要素)
  4. ヘッディングコンテンツ(h1~h6要素)
  5. フレージングコンテンツ(a, span, input, textarea要素など)
  6. エンベディッドコンテンツ(audio, video, canvas, iframe, img要素など)
  7. インタラクティブコンテンツ(a, button, select, controls属性があるaudio,video要素など)

例えば、head要素には1つ以上のmeta要素を含める、必ず1つのtitle要素を定義するなどのルールがあります。
そのため、HTML4以前のようなインライン要素の中にブロックレベル要素を含めてはいけないというルールはHTML5では存在しません。

また、フローコンテンツもしくはフレージングコンテンツを含む事ができ、hiddenが指定されていない1つ以上の要素を含める必要がある要素を「パルパブルコンテンツ」と呼びます。
親要素のコンテンツモデルを継承する「トランスペアレント」という性質を持つ要素もあります。

コンテンツモデルとカテゴリー

引用元:http://www.tagindex.com/html5/basic/contentmodel.html

セクションとアウトラインの概念

HTML4以前では、HTML文書に書かれている情報がそのページのコンテンツを表す情報なのか、それともサイト全体の情報なのかを判別する事が出来ませんでした。また、ページのコンテンツを表すにも、div要素でコンテンツを区切る事が多く、どこがページ内のコンテンツで、どこがページ外のコンテンツなのか(広告バナーなど)、コンピューターからすると非常に情報の所在があいまいでした。
HTML5では以下の方法によって、HTML文書に意味を与える事で上記のような問題を解決します。

コンテンツをセクションで分ける

body要素内のコンテンツをセクションで区切る事で情報の所在を明確にします。
実際には、body要素から始まり、section要素、article要素、aside要素、footer要素、header要素、nav要素を使って、セクションを区切ります。

見出しを適切なレベルで指定する

見出しをHTMLで定義するときはh1〜h6要素を使用し、セクション内の情報に対して相対的に順位付けを行います。
なお、HTML4以前はh1要素は1ページにつき、1つしか利用できないルールとなっていましたが、HTML5ではh1要素を複数回利用する事ができます。

セクションと見出しを定義する事で、ページ内の情報を目次にしたような「アウトライン」が形成されます。
たとえば、LPI-JapanのWebサイトをアウトラインで表すと以下のようなになっています。

LPI-JapanのWebサイト

LPI-Japanのウェブサイト

LPI-JapanのWebサイトのアウトライン

LPI-Japanのウェブサイトのアウトライン

HTML5で意味が変更された要素

HTML5では、文書の構造を定義するのはHTML、文書を装飾するのはCSSという思想をもとにHTML4.01では主に見た目の変更に使用されていた要素は、HTML5からちゃんと意味を持つようになりました。

意味の変更前と変更後

strong要素
強い強調 → 強い重要性
em要素
強調 → 強調(アクセント)
i要素
イタリック → 音声や心の中で思った事など
b要素
太字 → 他と区別するテキスト
small要素
小さい文字 → 注釈や細目
u要素
アンダーライン → 伝わりにくいテキスト

しかも、strong要素やem要素は入れ子にする事ができ、入れ子にする事でさらに意味を強くする事ができます。

<strong>私は<strong>ここをさらに重要だと伝えたい</strong>と思っています。</strong>
<em>私は<em>ここをさらに強調したい</em>と思っています。</em>

おまけ:DOCTYPE宣言について

HTML文書の始めに必ず記述する”DOCTYPE”。
Webを学び始めた頃は、おまじない的に記述しているけど、実際何のために定義しているのかを知らない方も多いのではないでしょうか。

“DOCTYPE”は「この文書がHTMLである事」と「どのバージョンで作成されているのか」をブラウザに伝えるために宣言します。つまり、DOCTYPE宣言をしなければ、ブラウザが正しくHTMLを理解できず、表示がおかしくなる可能性があるという事です。
HTML5からはDTDを記載しなくて良い仕様になったため、宣言方法がとても簡単になりました。

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>

少し深堀りすると、ブラウザはHTML文書が作られた時のHTML/CSSタグを理解できるように古いHTML文書を解釈する奇癖モード、中間のHTML文書を解釈する限定奇癖モード、新しいHTML文書を解釈をする無奇癖モードを備えており、DOCTYPEのDTDでバージョン情報を記載する事で適切な表示を行っていたようです。HTML5でDOCTYPEを宣言するという事は無奇癖モードにするという事なのです。
参考元:http://d.hatena.ne.jp/wakabatan/20120623/1340453066

いかがでしたでしょうか。僕自身、最近の業務はJavaScriptをもっぱら書くことが多いのですが、やはりHTMLがきれいにマークアップされていると、JavaScriptでも制御がしやすいです。
本当は普段使わなさそうなマニアック?なタグとかを紹介したかったのですが、それは別の機会にします。
HTML5プロフェッショナル認定試験の受験対策とかも書こうかなぁ。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone