0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML5 "コンテンツモデル" と "カテゴリー" について

Last updated at Posted at 2017-05-22

eye_html5.png

##したいこと
SEOを考慮したマークアップがしたい。
そこで
HTML5のカテゴリーと、コンテンツモデルの考え方についてまとめてみました。

##コンテンツモデルとは? 
どの要素にどの要素を入れてよいかを定義した**”ルール”**

##カテゴリーとは?
各要素が主要な7つ+以外3つに分類されたことを指す

##つまり
カテゴリーに分類された要素を、
コンテンツモデルというルールに基づいてマークアップをする ということです。

##必要な知識
1、各要素がどのカテゴリーに属してるか知る
2、コンテンツモデルの5つのルールを知る

##1、各要素がどのカテゴリーに属してるか知る
主要な7つのカテゴリー

  1. フロー・コンテンツ
  2. フレージング・コンテンツ
  3. セクショニング・コンテンツ
  4. ヘディング・コンテンツ
  5. エンベデッド・コンテンツ
  6. インタラクティブ・コンテンツ
  7. メタデータ・コンテンツ
    上記7種類以外のカテゴリー
  8. フォーム関連の要素
  9. セクショニング・ルート
  10. カテゴリーに属していない要素

細かい説明と図はこちらの記事を参考にして下さい

##2、コンテンツモデルの5つのルールを知る

  1. 入れてよいカテゴリーが決まっている
  2. 何も入れてはいけない
  3. 特定の要素が入る
  4. トランスペアレント
  5. 子孫まで制限される

細かい説明とsampleはこちらの記事を参考にして下さい

##まとめ
覚えることが**多すぎる!?**ので 

各要素のカテゴリーと、コンテンツモデルのルールをある程度知りながら
意識してマークアップをするのが大事かなと思いました。(私は、"確認する時間を設ける"で対応中)
後は、量をこなす(ググる→使う→忘れる→ググる→使う→忘れる→ググる→使う→....)を繰り返せば覚えるはずです。

更に詳しく知りたい場合は、この本がおすすめです。
徹底解説HTML5マークアップガイドブック

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?