今更聞けない!?正しく覚えたいHTML5のマークアップ

2016年7月3日WEB制作

2014年10月28日にW3CがHTML5の正式勧告をしてから1年が過ぎようとしている。

HTML5はHTML4までの仕様とは大きく異なる部分が多く、複雑な面もある為、現在でも間違ったマークアップをしているサイトが少なからず見受けられる。

特にセクショニングに関してはどういう構造で組んでいいか、よく分からない人も多いと思う。(articleやsection,nav,asideの使い方等)

そう思う一因として、このような事があった。
先日はてぶの人気エントリーを見ていたらこんな記事が上がっていたのだ。

http://html-five.jp/101/

一通り見て、何でこの記事がはてぶの人気エントリーに上がってるのか気になった。

公開日が2012/03/26で結構古い情報(W3CのHTML5正式勧告がされる2年前)で間違っている所も多い。

それはさておき、この記事の補足でも無いが、HTML5のマークアップに参考になる記事の紹介や基本的な事を紹介していきたいと思う。

書いてる途中に気づいたんですが、HTML5のマークアップに関してはMDNの記事を見たら、ほぼ全ての問題は解決しますね。(この記事の存在意義が・・・(;´Д`)ナス)

ゼロからはじめるHTML5でのサイト制作

せっかく書いたので、ここから下は残しておきます。

スポンサーリンク

よくあるマークアップの間違い例

HTML5では文章構造のルールが複雑になった反面、おおまかに定義されているものも多いため【これが一番正しい!】という答えが無い。

特にarticleやsection等のセクショニングコンテンツに関しては、ルールは明確だが線引きが不明確なのだ。

以下に紹介する記事は、主にHTML5で変更されたタグのよくある間違いと正しい使い方を解説している。

そのHTML5のタグは合ってますか?間違えやすいタグ15選

“マークアップ”するということ ~ HTML5勧告に寄せて ~

一番参考になるHTML5のサイト

意外と見られていないのが、W3C公式サイト。情報量が凄まじく多く敬遠されがちだが、ちゃんと日本語訳のページも容易されているので、きちんと見ておいた方がいい。

HTMLとXHTMLのための語彙と関連API

HTML5日本語訳 HTMLとXHTMLのための語彙と関連API

辞書代わりに使うなら下記サイト。サンプルでコードも載っているので非常に分かりやすい。

HTML5 タグリファレンス

コンテンツモデルをきちんと理解しよう

自分にも当てはまることだが、articleやsection等の構造等の実装面を優先して、このような基礎に当たる知識を飛ばして覚えていくと後で困った事になる。どのような分野でも基礎は大事。

html5から採用されたコンテンツモデル。各HTML要素はコンテンツの種類を定義する規則を遵守しなければいけない。それぞれのコンテンツモデルは以下のように分類される。

Metadata content メタデータ・コンテンツ
Flow content フロー・コンテンツ
Sectioning content セクショニング・コンテンツ
Heading content ヘッディング・コンテンツ
Phrasing content フレージング・コンテンツ
Embedded content エンベッディッド・コンテンツ
Interactive content インタラクティブ・コンテンツ

コンテンツモデルって言葉じゃ分かりにくいので、ざっくり言うと

どの分類の要素が、どの分類の要素を含むことができるのかというルール

HTML5バリデーションエラーを起こさない為にも必要な知識であり、このコンテンツモデルを理解していないと予期せぬ動作を招く事があります。

また、コンテンツモデルは一つの要素がひとつのコンテンツモデルだけに属するものではなく、複数のコンテンツモデルに属している要素もあり、そこから各カテゴリーにあたるコンテンツモデルに分類されています。

コンテンツモデルの概念について、分かりやすく解説されている記事がこちら。

HTMLのカテゴリーとコンテンツモデルを理解する

『コンテンツ・モデル』について / HTML5マークアップ時の基本

どのような分類になってるか一目で把握出来る、チートシートを公開している記事があったのでご紹介します。

HTML5入門!画像でわかるコンテンツモデル最強チートシート

html5 コンテンツモデル早見表
html5 コンテンツモデル早見表

HTML5のコーディング例

小難しい話はここまで
一番わかりづらいarticleやsection等の具体的な使用例が書いてある記事を紹介する。

article

文章が単独で意味を成し完結できるセクション要素

入れ子にした場合 中のarticleは外側のarticleの内容に関連している必要がある。

HTML5で新しく定義された新要素     「article要素」の使い方の基本をまとめよう

section

章や節や項のように、見出しとそれに関する内容というように階層構造になる範囲を定義する領域

HTML5で新しく定義された新要素    「section要素」の使い方の基本をまとめよう

各セクショニングコンテンツの解説

[HTML5] 新要素まとめ【2014/2/14版勧告候補】

article,section,nav,aside,header,footer,mainなどの解説 HTML5 実践編

HTML5でのアウトラインの書き方について考えてみた。

html5の要素articleとsectionの違いを理解する

文書構造を意識しながらHTMLマークアップしよう!

まとめ

MDNの記事を見れば全て解決!( ゚∀゚)・∵. グハッ!!

この記事が気に入ったら
『いいね』しよう!


PAGE TOP