CSSでスタイルを指定しようとしても、うまく指定できない時がありませんか？CSSの指定が効かない原因の一つとして、『要素の性質を理解できていない』ことが挙げられますが、ざっくりと『インライン要素』や『ブロックレベル要素』だけでもわかると「なぜ効かなかったのか」、「どうすれば効くようになるのか」が分かるようになってきます。
ただ、ブロックレベル要素とインライン要素という概念はHTML4.01までで廃止され、HTML5では「コンテンツモデルとカテゴリー」という概念が導入されているため、すこし難しく感じてしまいます。
すべて理解するには時間がかかりそうですが、インライン要素とブロックレベル要素という概念から、どのように変化したのか分類の概略だけでも理解して、コーディングのヒントにしたいと思います。
コンテンツモデルとは
仕様書で定義されている「要素」のルールで、要素にどのような内容のコンテンツを入れるのが良いのかを表したものです。
コンテンツモデルが「無い」要素
コンテンツモデルの「無い」要素もあります。
コンテンツの種類
コンテンツモデルは、特性が類似している要素をグループ化して、カテゴリという形で分類されています。カテゴリは7つに分けられ、「カテゴリ無し」という分類と合わせて8つに分けられています。
7つのカテゴリ
仕様書に掲載されている図をアレンジして、色分けしました。
残りのコンテンツの表示または動作を設定するコンテンツ、ドキュメントと他のドキュメントとの関係を設定するコンテンツ、または他の「帯域外」情報を伝達するコンテンツです。
文書に関する情報などを定義する要素で、head要素の中で使用できるコンテンツです。このカテゴリに属する要素の一部は、フローコンテンツやフレージングコンテンツにも属しているものがあります（下記参照）。
base・link・meta・noscript・script・style・template・tetle・
フローコンテンツ(Flow content)
ドキュメントやアプリケーションの本文で使用されるほとんどの要素は、フローコンテンツとして分類されます。
body要素の中で使用されることが多い要素です。
a・abbr・areamap（要素の子孫の場合）・article・aside・audio・b・bdi・bdo・blockquote・br・button・canvas・cite・code・data・datalist・dal・datails・dfn・dialog・div・dl・em・embed・fieldset・figure・footer・form・h1～h6・header・hgroup・hr・i・iframe・img・input・ins・kbd・label・map・mark・menu・meter・nav・noscript・object・ol・output・p・picture・pre・progress・q・ruby・s・samp・script・section・select・slot・small・span・strong・sub・table・template・textarea・time・u・ul・var・video・wbr・
セクショニングコンテンツ(Sectioning Content)
見出しとフッターの範囲を定義するコンテンツです。
セクションの区分を示す要素です。
article・aside・nav・section・
ヘディングコンテンツ(Heading Content)
セクションのヘッダーを定義します。（セクションコンテンツ要素を使用して明示的にマークアップされているか、見出しコンテンツ自体によって明示されているかどうか）
見出しを定義する要素です。
h1・h2・h3・h4・h5・h6・hgroup・
フレージングコンテンツ(Phrasing Content)
ドキュメントのテキストであり、段落内レベルでそのテキストをマークアップする要素でもあります。一連のフレージングコンテンツが段落を形成します。
文章や、文章中に含まれる要素です。（HTML4.01までインライン要素とされていたものがここに属していることが多い）
a・abbr・areamap（要素の子孫の場合）・audio・b・bdi・bdo・br・button・canvas・cite・code・data・datalist・del・dfn・em・embed・i・iframe・img・input・ins・kbd・label・map・mark・meter・noscript・object・output・picture・progress・p・ruby・s・samp・script・select・slot・small・span・strong・sub・sup・template・textarea・time・u・var・video・wbr・
エンベディッドコンテンツ (Embedded Content)
別のリソースをドキュメントにインポートするコンテンツ、またはドキュメントに挿入される別の語彙からのコンテンツです。
エンベディッドコンテンツ（埋め込みコンテンツ）は、他のリソースなどを埋め込む要素です。
audio・canvas・embed・iframe・img・object・picture・video・
インタラクティブコンテンツ(Interactive Content)
ユーザーとの対話を特に目的としたコンテンツです。
ユーザー側からもアクションを起こせるような要素です。
a（href属性が存在する場合）・audio（controls属性が存在する場合）・button・details・embed・iframe・img（usemap属性が存在する場合）・input（type属性が非表示ではない場合）・label・select・textarea・video（controls属性が存在する場合）・
まとめ
すべてではありませんが、フレージングコンテンツに属する要素が、かつて「インライン要素とされていた要素」ということがわかりました。
1つの要素につき、複数のカテゴリに属することもあるため、すべて理解するには時間がかかるかもしれませんが、自分が扱う要素についてひとつずつ進んでいけば、理解は一歩ずつ深まるはずです。
参考資料：HTML仕様書（https://html.spec.whatwg.org/）
