Home > HTML5, Web > Content Models for HTML5

Content Models for HTML5

HTML4 Content is divided into block elements and inline elements, like this:

  • Block Elemnts: div, form, h1, h2, h3, h4, h5, h6, li, ol, p, pre, table ul
  • Inline Elements: a, em, img, input, label, span, strong

With HTML5, there is an emphasis on semantics and structural tagging, thus, the content model looks like this:

Content Model Descriptions Tags
Metadata Sets up the presentation or behavior of the rest of the content base, command, link, meta, noscript, script, style, title
Embedded Any content that imports other resources into the document audio, canvas, embed, iframe, img, math, object, svg, video
Interactive Content specifically intended for user interaction a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video
Heading Defines the header of a section, which can either be explicitly marked up with sectioning elements, or implied by the heading content itself h1, h2, h3, h4, h5, h6, hgroup
Phrasing The text of the document, as well as elements used to mark up the text within paragraph level structures. kind of like inline elements in HTML4 a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map,mark, math, meta, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr
Flow Elements that would be included in the normal flow of the document. Anything between the body tag. a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2 ,h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strongn, style, sub, sup, svg, table, textarea, tme, ul, var, video, wbr
Sectioning Content that defines the scope of headings and footers article, aside, nav, section

Notice that a lot of content types overlap, and are related. Almost all content is part of the flow content.

Advertisements
Categories: HTML5, Web Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: