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構成変わるからリニューアル前には記事増やしたくなかったけど仕方ない）
