htmlのコンテンツモデルについて解説します。
初心者の方はまだ気にしなくて大丈夫です。
ただ、中にはコンテンツモデルを知って、自分で理解しようとしたけどよく分からなかったという人もいると思います。
そんな人に向けて、コンテンツモデルの理解の仕方をお伝えしていければと…
コンテンツモデル
まず、コンテンツモデルとはhtmlにまつわる話です。
cssは無関係なので、忘れましょう。
そして、コンテンツモデルとはhtmlでコードを書く時、
「ある要素の中にどの要素を入れられるか」
という新ルールになります。
html4までに使われていた「ブロック要素・インライン要素」に替わる定義です。
「ブロック要素・インライン要素」の時は、ブロック要素の中に入れるのはインライン要素。
反対にインライン要素にブロック要素は入れられませんでした。
とても分かりやすいルールです。
…と言ってみましたが、初心者の人にしてみたらこれもむずかしいかもしれません。
何がブロック要素で、どれがインライン要素か判断つかないと思うので…
それはさておき、先に進みます。
で、コンテンツモデルになったら、このルールが少々ややこしくなります。
ただ、これは覚える必要はありません。
例えば<p>要素だったら、その中に何を入れられるのかを確認すればいいだけ。
その確認方法をお伝えしたいところですが、先にコンテンツカテゴリーというのを知っておかなければいけません。
ですので、次でコンテンツカテゴリーを解説します。
コンテンツカテゴリー
html5以降では、要素は大きく7つのカテゴリーに分けられました。
ですからさっきお話しした、「ある要素の中にどの要素を入れられるか」というのは、大まかには「あるカテゴリーの中にどのカテゴリーを入れられるか」と言い換えられます。
なので、カテゴリーの理解が必要なんです。
というわけで、7つのカテゴリーを紹介。
- メタデータコンテンツ
- フローコンテンツ
- セクショニングコンテンツ
- ヘディングコンテンツ
- フレージングコンテンツ
- エンベッディッドコンテンツ
- インタラクティブコンテンツ
メタデータコンテンツ
<head>内に使われる要素です。
<meta> <title> <link> <script> <noscript> <title> <base>
フローコンテンツ
<body>の中で使われる要素になります。
<a> <abbr> <address> <area> <article> <aside> <audio> <b> <bdi> <bdo> <blockquote> <br> <button> <canvas> <cite> <code> <command> <data> <datalist> <del> <details> <dfn> <dialog> <div> <dl> <embed> <em> <fieldset> <figure> <footer> <form> <h1>〜<h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <main> <map> <mark> <menu> <meter> <nav> <noscript> <ol> <output> <p> <picture> <pre> <progress> <q> <ruby> <s> <samp> <script> <section> <select> <small> <span> <strong> <sub> <sup> <table> <template> <textarea> <time> <u> <ul> <var> <video> <wbr>
もうほとんどの要素になりますね。
セクショニングコンテンツ
ある範囲のエリアを括る時に必要な要素です。
<article> <aside> <nav> <section>
ヘディングコンテンツ
見出しを構成する要素ですね。
<h1>〜<h6> <hgroup>
フレージングコンテンツ
フレーズ…単語の集まり
<abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <data> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <keygen> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr> および通常の文字列
エンベッディッドコンテンツ
エンベッディッド(embed)…埋め込む
画像やvideoなどの要素です。
<iframe> <img> <video> <audio> <object> <embed> <svg> <canvas> <math>
インタラクティブコンテンツ
インタラクティブ…相互の、双方向、やりとり
<a> <button> <label> <select> <textarea> <iframe> <embed> <keygen> <details>
繰り返しますが、覚えようとしなくていいです。
7つのカテゴリーに分かれてるってことだけ知ってもらえれば。
何の要素にどれを入れられるかの例
さて、ここからが本題。
よくほかの記事でも取り上げられている<p>を例にとってみましょう。
<p>はカテゴリーで言うと、フローコンテンツでした↓
フローコンテンツ
<a> <abbr> <address> <area> <article> <aside> <audio> <b> <bdi> <bdo> <blockquote> <br> <button> <canvas> <cite> <code> <command> <data> <datalist> <del> <details> <dfn> <dialog> <div> <dl> <embed> <em> <fieldset> <figure> <footer> <form> <h1>〜<h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <main> <map> <mark> <menu> <meter> <nav> <noscript> <ol> <output> <p> <picture> <pre> <progress> <q> <ruby> <s> <samp> <script> <section> <select> <small> <span> <strong> <sub> <sup> <table> <template> <textarea> <time> <u> <ul> <var> <video> <wbr>
<p>の中には何のカテゴリー要素を入れれるかは、こちらを見てもらえれば分かります。
「許可されている内容」とありますね。
そして、そこには『記述コンテンツ』とあります。
記述コンテンツ ＝ フレージングコンテンツです。
フレージングコンテンツ
<abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <data> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <keygen> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr> および通常の文字列
この中には<p>の中によく入れる<span>もあります。
ですから、
<p>ほどほどに<span>うん</span>ほどほどに</p>というのは、正しいコードの書き方ですね。
それっぽく言うと、マークアップです。
また、逆に言うフレージングコンテンツ以外は入れられません。
もう1つ例として、たった今挙げた<span>を取り上げてみますね。
<span>は2つのカテゴリーに属しています。
- フローコンテンツ
- フレージングコンテンツ
フローコンテンツ
<a> <abbr> <address> <area> <article> <aside> <audio> <b> <bdi> <bdo> <blockquote> <br> <button> <canvas> <cite> <code> <command> <data> <datalist> <del> <details> <dfn> <dialog> <div> <dl> <embed> <em> <fieldset> <figure> <footer> <form> <h1>〜<h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <main> <map> <mark> <menu> <meter> <nav> <noscript> <ol> <output> <p> <picture> <pre> <progress> <q> <ruby> <s> <samp> <script> <section> <select> <small> <span> <strong> <sub> <sup> <table> <template> <textarea> <time> <u> <ul> <var> <video> <wbr>
フレージングコンテンツ
<abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <data> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <keygen> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr> および通常の文字列
で、<span>の中には何の要素を入れるかというと、さっきのサイトを確認しましょう。
「許可されている内容」に『記述コンテンツ』とあります。
記述コンテンツはフレージングコンテンツでしたね。
フレージングコンテンツ
<abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <data> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <keygen> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr> および通常の文字列
ですから、<span>の中に<img>や<small>も入れれることになります。
<p>ほどほどに<span>うん<small>ううん</small>うん</span>ほどほどに</p>ってのもオッケーなわけです。
こうやって、調べることである要素の中に入れられる要素が確認できます。
とはいえ、そんなに調べることはありません。
大抵はこれまでどおりのコードの書き方で問題ないので。
もし、この書き方はいいのかなあ？って疑問に思った時に、調べてみればそれで大丈夫。
それか仕事をするようになってからでも遅くないと思いますよ。
上記のとおり、調べ方さえ分かっていれば問題ないので。
まとめ
- コンテンツモデルは、htmlマークアップの新しいルール
- コンテンツカテゴリーは7つ
これだけ頭の片隅に入れておきましょう。