ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2016年12月5日

HTML5のマークアップ

markup-of-html5以前こちら(今更聞けない!HTML5・CSS3)の記事でも
取り上げたように
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要素のコンテンツモデルが
フローコンテンツなので、
コンテンツモデルを受け継ぎ、
フローコンテンツを内容に持つことができます。

HTML5で新しく加わった要素

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

header要素

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要素にするべきではありません。

footer要素

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

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

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

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

このエントリーをはてなブックマークに追加
メルマガ登録