HTML5のマークアップ

2014年にHTML5の勧告がされたことによって、HTML4ではできなかった様々なことができるようになりました。
実際にHTML5を使ってどのようにマークアップするといいのか今回はそちらを書いていきたいと思います。

マークアップとは？

そもそもマークアップとは、人間語が認識出来ない機械でも文書の構造が認識出来るように、文書の各要素に目印を与えて行く事です。
見出しや段落などと言った紙の文書では当り前にある要素だけでなく、ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、マークアップに依り認識が可能になります。
HTMLでのマークアップは、タグと呼ばれる目印を利用します。

SEO対策にも

正しいマークアップを身につけることは、もちろんSEO対策にも効果的です。
Googleの基準に習い正しくマークアップし、より優れたコードをめざしながらサイトパフォーマンスを向上させましょう。

文書構造をまとめよう

HTMLマークアップをはじめる前に、ページの文書構造を確認しましょう。
デザインから作成の場合にはレイヤー名などにあらかじめクラスやIDをふっておくと、構造が理解しやすくなります。
最初の方はデザインを印刷したものに書き込んでいくとわかりやすいと思います。
ソースコード内で迷子にならないよう先に構造を整理しておくクセをつけておきましょう。

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

要素を記述するルールとなるのが「カテゴリー」と「コンテンツモデル」です。
HTML5では、類似する特性をもった要素が7つのカテゴリーに分類されており、どの要素を子要素として持てるのかはコンテンツモデルによって定義されます。

カテゴリー

HTML5では、類似する特性を持った要素が以下で紹介する7つの「カテゴリー」に分類されています。
それぞれの要素は、0個以上のカテゴリーに分類されます。
つまり、どこのカテゴリーにも属していない要素や、複数のカテゴリーに属する要素も存在します。

メタデータコンテンツ

文書内のコンテンツの表示や動作を指定したりドキュメントの関連性の指定、文書のメタ情報などを指定したりする要素。

フローコンテンツ

body要素内で使われるほとんどの要素は「フローコンテンツ」に分類されます。

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

明示的にアウトラインを生成する要素。
各セクショニングコンテンツは通常、見出しを伴って使用されます。
article、aside、nav、section要素が該当します。

ヘディングコンテンツ

セクションの見出しを定義する要素。
暗黙的にアウトラインを生成します。
h1、h2、h3、h4、h5、h6要素が該当します。

フレージングコンテンツ

文書を構成するテキストを表す要素。
従来のHTMLでインライン要素と呼ばれていた分類です。
※従来インライン要素とブロックレベル要素でわけられていたものがHTML5では廃止され、今回紹介しているコンテンツモデルによってより細かくわけられるようになりました。

エンベディッドコンテンツ

ドキュメントに他のリソースを組み込む要素。
audio、canvas、embed、iframe、img、object、video、picture要素が該当します。

インタラクティブコンテンツ

ユーザーの操作に特化した要素。
button、textarea、labelなどが該当します。

コンテンツモデル

コンテンツモデルは、ある要素がどの要素を内容として持つことができるか、つまり子要素とできるかというルールを表します。
例えば、コンテンツモデルが「フローコンテンツ」のaside要素は、フローコンテンツに属するp要素などを内容として持てます。
フローコンテンツに属していないlink要素などを内容として持つことはできません。

また、audio要素のように、属性と属性値の指定によってコンテンツモデルが変化する要素も存在します。
なお、空要素のコンテンツモデルは「空」です。

トランスペアレントコンテンツ

a、audio、canvas、del、ins、map、noscript、video要素は、
コンテンツモデルが「トランスペアレントコンテンツ」となっており、親要素のコンテンツモデルを受け継ぐ要素です。
例えば、親要素にaside要素を持つa要素は、aside要素のコンテンツモデルがフローコンテンツなので、コンテンツモデルを受け継ぎ、フローコンテンツを内容に持つことができます。

HTML５で新しく加わった要素

HTML5で新しく加わった要素について詳しく見ていきたいと思います。
マークアップする順番に沿って紹介していきます。

ｈeader要素

header要素（＜header＞）は、HTML5 から新たに追加された要素で、イントロダクションやナビゲーショングループであることを示す際に使用します。
文書のヘッダ情報を表すタグとは異なります。
header要素はページの構造化要素であり、フロー・コンテンツにしか属していません。

＜header＞の中には、通常は ＜h1＞〜＜h6＞ や ＜hgroup＞ など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。

従来は＜div id=”header”＞＜/div＞としていたところを＜header＞＜/header＞とマークアップすることができるようになりました。
divと同じようにidやclassをふることも可能です。

nav要素

nav要素は文書内の
主要なナビゲーションのセクションを表します。
主要なナビゲーションとは、Webサイト内で共通で使われているグローバルナビゲーションと呼ばれるセクションや、ブログのサイドメニューにあるカテゴリーの一覧といったリンクブロック、あるいは文書内で各セクションに移動するためのリンクブロックなどが該当します。

nav要素はセクショニング・コンテンツです。
セクショニング・コンテンツは『それ単体でページの骨組みを作るもの』です。ですから、見出しがなければなりません。

こちらも従来は＜div id=”gnav”＞＜/div＞などとマークアップされていました。
header要素と同じくidやclassをふって複数存在するときには使い分けることが可能です。

main要素

main要素は文書内の主要なコンテンツを表します。
主要なコンテンツとは、Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、その文書内で主な内容となる部分を指します。
また、セクショニングコンテンツではないので、文書のアウトラインに影響を与えません。
article、aside、footer、header、navの各要素を祖先要素に持つことは不可とされています。

article要素

article要素は文書内の独立した記事セクションを表します。
ニュースサイトやブログにおける各記事や、それに付随するコメントなども独立した記事セクションと考えられます。

article要素を入れ子にするときは、子孫要素は祖先要素にあたるarticle要素の内容に関連した内容を表します。
記事へのコメントをarticle要素でマークアップする場合などが該当します。

section要素

section要素は文書内の一般的なセクションを表します。
「セクション」とは通常、見出しを伴う文書内の章や節を意味します。
また、見出しがない場合でも、暗黙的にあるものとみなされます。
段組みのために使うのはNGです。
divの代わりに使ってはいけません。

section要素はセクショニングコンテンツなのでアウトラインを生成しますが、他に適切なセクショニングコンテンツがない場合に使用しましょう。

aside要素

asideは
その前後の要素のコンテンツに関係しているが、別のコンテンツとして分離されたものとみなされます。
補足的な情報であることが多いです。
逆に、抜き取ってしまうと本筋の意味が通らなくなる内容はaside要素にするべきではありません。

ｆooter要素

footer要素はheader要素と同じくページの構造化要素でありフロー・コンテンツにしか属していません。
その直近の祖先にあたるセクショニング・コンテンツ、または、セクショニング・ルートのフッターを表します。

通常はページの最後に現れますが、必ず最後に置かなければならないというわけではありません。

以上header、nav、main、article、secrion、aside、footerの7つが通常マークアップする際に使用するものかと思います。

コーディングを行う際、このような基礎的な構造を覚えているとマークアップしやすくなるのではないでしょうか？
また、冒頭でも述べましたが、正しいマークアップはSEO対策としても期待ができるのでぜひ身につけていきましょう！