Content model

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.

Simple.

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:

  1. Understand the semantics of the elements
  2. Code the page per these semantics
  3. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s