Content Model in Html5

One of the comment questions of today is that What is Content Model Html5 has or What is the Content Model in Html5. So here we are going to discuss what it is.

In the previous additions of html we have two types of elements as block elements and inline elements. The block elements are those who contain space in the document like a block or across the document. They define the areas of the document. Inline elements are those who flow with the text in them.

Now in HTML5 we have seven overlapping categories than two elements/contents. Context model defines what kinds of contents are expected in certain contexts. A content model may contain zero or more elements. An element belongs to zero or more categories. These overlapping contents can be more than one content long.

Mostly used content in the body of a document are the flow contents. It includes text, images, headings, lists, hyperlinks, images and embedded.

html5-flow-contentThe sketch shows how the HTML5 content module in composed. You can see that the flow is covering all the elements and a good part of Meta data as well. The Phrasing element includes the text as well as the elements that markup that text. This includes images, hyperlinks, form elements, text markups like <b> and <i> and anything else you can put into a paragraph.

The Heading content includes the heading tags like <h1> to <h6> tags and the new <hgroup> tag as well. The sectioning content includes the new sectioning elements like <article>, <aside>, <nav> and <section>. The Embedded content is the content that inserts another resource into the document. It includes audio, video and flash etc. The Interactive content is the content that interacts with the user. It includes hyperlinks, form elements, menus and even the media if it has the controls. The Meta Data is the content that sets the behavior of the other elements of the document. It also sets up the relationship of the document to the other documents.

These seven contents categories represent the bulk of the content model used in HTML5. Understanding these will be a very helpful thing in your Web Development journey