07/202003

【HTML5】コンテンツ・モデル

HTML5が制定されてもう数年たち、世間では5が主流となってきていますが、皆さんは5になってからブロックレベル/インライン要素が廃止されたことに気づいているでしょうか?

※ブロックレベル/インライン要素のルールはざっくり言うと、「インライン要素の中にブロックレベル要素を入れてはいけない」というものです。

その代わりにコンテンツ・モデルという概念が作成されました。

ちなみに自分はブロックレベル/インライン要素が廃止されたのは知っていましたが、このコンテンツ・モデルという単語は知りませんでした(内容はなぜか把握していたけど)

これは「あるコンテンツの中にはこのコンテンツしか配置できない」「あるコンテンツの中にはこのコンテンツは配置してはいけない」というルールです。

この「コンテンツ」とは、ざっくりカテゴリーとしてタグが分類されています。

カテゴリー一覧

コンテンツ名 意味 タグの一部
メタデータコンテンツ 主にhead内に記述するサイトの情報を示すタグ meta, link, script, title
セクショニングコンテンツ 文章の塊を示すタグ section, article, aside, nav
ヘッディングコンテンツ 見出しのタグ h1,  h2
フレージングコンテンツ 段落などに含まれるタグ(従来のインライン要素がほぼ含まれる) a, span, button, small
エンベッディッドコンテンツ 主に外部コンテンツを指すタグ img, audio, video, canvas
インタラクティブコンテンツ 主にアクションを発生させられるタグ a, input, button

※ちなみにフローコンテンツというものもありますが、これにはほとんどのタグが含まれます。

見た感じHTMLの基本概念である「文章構造」にタグを振り分けたって感じですね。

実際の書き方は?

そして以下がNGパターンとOKパターンです。

NG
<span>
  <div>
      <p>吾輩は猫である</p>
  </div>
</span>


まぁ普通に気持ち悪いですね。昔のブロックレベル/インライン要素の概念でもspanの中にdivが合ってだめですし、コンテンツモデルとしても文章の一部(span)の中に塊(div)や段落(p)があって構造がおかしいです。

OK
<div>
  <p>吾輩は<span>猫</span>である</p>
</div>

まず塊(div)は外へ、中には段落(p)を配置し、一部の文字を囲む(span)。

コンテンツモデルとしての文章構造もしっくりきますし、昔のブロックレベル/インライン要素としてもおかしくはないですね。

結論

厳密にはブロックレベル/インライン要素の時代と考え方は違いますが、基本的には「文章としておかしい構造を書かない」ということを徹底すればいいと思います。

てかこれ、ブロックレベル/インライン要素時代でも普通意識して書いてると思うので、ちゃんともとから文章構造を意識して作っていれば特にコンテンツモデルができたからって修正する箇所は少ないんじゃないかな……

余談

ちなみにこのブログはそんなこと知らない時期に改修したままなので、html構造はやばいです。

いきなりh4とかで始まってたりするからね。

今nuxt.jsでフルリニューアル作業をしているので、今月中には切り替わると思います(記事のURL構成変わるからリニューアル前には記事増やしたくなかったけど仕方ない)

関連エントリー

【JS】HighSlideに必要なコードを自動挿入【jQuery】

どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlid...

2018/03/01
【正規表現】英文以外の半角スペースを排除

とある事情により、日本語英語混在の文で半角スペースを排除する正規表現を探してい...

2017/12/08
SSL化予定

最近絵の記事が全くない御堂です。 てめぇ本当に絵描か? それはさておき...

2017/08/18
CSSの小技

今までの記事を統合しました。以後はこちらに追記していきます。 MENU ...

2014/05/10
【freo】ページ送りナビゲーション【テンプレート】

freoのページ送りナビゲーションって初期だと前のページと次のページのみなんで...

2014/01/04
【艦これ】ユーザースタイルシート

ちまたで人気の肝これ……なんか違う。そう艦これ。一発変換で肝がでるってどういう...

2013/10/22

コメント

  • コメントはまだありません。

コメント登録

  • 閲覧制限 ※管理者のみにすると投稿者でも確認ができなくなります。

archive


×

ログイン