Quick Tip

CSS - when using more than one way to apply a style, be sure to understand style precedence. Inline styles will take precedence over embedded. Embedded will take precedence over external. For the most part, web sites are easier to work with and maintain when most if not all the styles are on an external style sheet in one place . . . then precedence is not an issue.

 

Tips, Tricks & Tutorials

HTML Home | Development of HTML5 | Why HTML5?
Current Support | What's New | Content Models

HTML5: Content Models

In previous HTML versions, there were two content models.  Now, in HTML 5, there are seven.

In the past, elements were either one of two content models:

  1. Block-level (p, div, blockquote, li, ul, etc)
  2. Inline (span, strong, u, i, etc).

It was the distinction of these elements that determined the document structure. Rules were in place about how the elements should be displayed.

There are seven main content models in HTML5 and elements may belong to more than one. This allows authors to create more sophisticated document structures and to write more meaningful code. The seven content models in HTML5 are as follows:

  1.  Metadata
    Content that sets up the presentation or behavior of the rest of the content. Elements found primarily in the head of the document. Examples elements include link, meta, noscript, script and title.
  2. Flow
    Content is the majority of elements in HTML5. Example elements include the anchor tag, article, aside, blockquote, canvas, details, div, em, form, heading tags, hgroup, map section, span, strong, table. If the element can fit within the body tag, then it is probably considered part of the flow content model.
  3. Sectioning
    Content that defines the scope of headings and footers. Examples elements include article, aside, nav, and section tags.
    Learn more about sections at Mozilla Developer Network, including how to use HTML5 elements in non-HTML5 browsers.
  4. Heading
    Content contains the heading tags, h1 through h6 and the hgroup elements.
    Learn more about headings at Mozilla Developer Network, including how to use HTML5 elements in non-HTML5 browsers.
  5. Phrasing
    Content is the text of the document as well as elements used to markup the text within paragraph level structures. Phrasing content is very much the same as inline level elements from HTML4. Example elements include anchor tag, em, image label mark, span, and strong.
  6. Embedded
    Content that imports other resources into the document. Example elements include object, video, canvas, and embed.
  7. Interactive
    Content specifically intended for user interaction. Example elements include anchor tag, details, object and the video element if controls are enabled.

There are several overlapping areas of content types. Almost all content is contained within the Flow content model with Phrasing, Embedded, Interactive, and Metadata all being somewhat related to each other. Sectioning and Heading content are separate within the flow and they’re used to define the document structure and outline.


There is much more emphasis on structure in HTML5 and all of the content models are only concerned with structure of the markup, not the presentation. Presentation is controlled with CSS.