What is a content model?
A content model answers a simple question: what can go inside what?
We’d expect to see a strong element inside a p. We wouldn’t expect an li inside an h1 or vice versa. A p inside a td? Maybe, maybe not. That’s what a content model defines.
The old way
XHTML and HTML4 recognise two categories of element in their content model: block and inline. Generally a block element can be contained by a div, itself a block element. An inline element can appear in a block element, and can be contained by a span, itself an inline element.
The HTML5 way
The HTML5 content model is fiendishly complex, with a very simple intention.
Each element has been considered individually, and the specification defines precisely which can contain which. To do so it defines seven content categories instead of XHTML’s two: Metadata, Flow, Sectioning, Heading, Phrasing, Embedded and Interactive
Broadly you do not need to know this detail. If you understand the intention and the semantics of each element, you shouldn’t go far wrong:
- Understand the semantics of the elements
- Code the page per these semantics
- Run your markup through the W3C validator to check its compliance
If your markup fails validation, you may want to refer to the spec, or to other online sources, to figure out why. You might start at Content model – the fiendishly complex details on this site.
Content model vs CSS: block and inline display
The CSS display property can take a large range of values, including block and inline. This is not affected by the HTML5 content model. In fact the content model avoids using the words block and inline specifically to avoid confusion with the CSS terms.