Content Models
To understand what is html5 content model is,we first look at the html 4.01 content model.Html 4 content model
There are two type of content model in html 4.01 or tags are divided into to groups.
Block Level:-
Block level element is that type of element who occupy the entire line or row from very left to the endof right.Such as h1,div,p
Inline:-
Inline element just occupy what is needed for its own.It does not hold any blank space to its left orright.such as span,b,a
Necessity of html 5 content model
Html 4 markup structure is not well organized.We use div everywhere to makeheader,sidebar,navigation,footer,container and so on.We usually give class or id to div to structure website.
<html>
<head>
</head>
<body>
<div id=wrapper>
<div id=header>
<div id=nav>
</div>
</div>
<div id=sidebar>
</div>
<div id=content>
< /div>
<div id =sidebar>
</div>
<div id= footer>
</div>
</div>
</body>
</html>
In this code we only use div tags to create header,navigation menu,sidebar,content,footer.So this is user friendly but not browser friendly.Browser just saw a collection of div tag.Does not understand, Why and what purpose this div tag is used there?.In this perspective,browser does not understand which section of the web page is represents header,navigation,contnent or footer.So to make a more browser friendly document structure html 5 bring seven(7) different contnet model.Which is designed to solve the previous problem and make markup structure more meaningful both browser and web designer.
HTML 5 Content Models
1.Metadata2.Flow
3.Sectioning
4.Heading
5.Phrasing
6.Embedded
7.Interactive
1.Metadata:-
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents.The tags are base, command, link, meta, noscript, script, style, title.
For example with link,style,script tag we can able to make the style or import it for rest of the tag in web page.This means this tags create or import something for other tags.Other tags depand on them for styling.
2.Flow:-
Most elements that are used in the body of documents and applications are categorized as flow content.a, abbr, address, area (if it is a descendant of a map element) article, aside, audio, b, bdi, 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, map,
mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section,
select, small, span ,strong, style (if the scoped attribute is present) sub, sup, svg, table, textarea, time, u,
ul var, video, wbr, text
3.sectioning:-
Sectioning content is content that defines the scope of headings and footers.For example,in a Newspaper there are several section such as Economic news,Games and sports section,Editorial section.Like Newspaper in web page there are some section. article, aside, nav, section
4.Heading:-
Heading content defines the header of a section.such as h1,h2,h3,h4,h5,h6 and hgroup.
5.Phrasing:-
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.It represents inline tags.a (if it contains only phrasing content) abbr, area (if it is a descendant of a map element) audio, b, bdi, bdo,
br, button, canvas, cite, code, command, datalist, del (if it contains only phrasing content) dfn, em, embed, i,
iframe, img, input, ins (if it contains only phrasing content) kbd, keygen, label, map (if it contains only phrasing content) mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text.
6.Embedded:-
Embedded content is content that imports another resource into the document.audio, canvas, embed, iframe, img, math, object, svg, video
7.Interactive content:-
Interactive content is content that is specifically intended for user interaction.
the toolbar state) object (if the usemap attribute is present) select, textarea, video (if the controls attribute
is present).
Tags Duplication:- You notice that there are several tags are belong to two or more content models.This happen how and for what purpose they are using.For an example a video tag is in Embedded content model.If there have controls option at that time it will be Interactive content model also because user may control the video .Also it will be phrasing when this included within an paragraph.
From the above image this matter become clear.
Many many Html 5 creator because they give us more meaningful tags and content model.By using this content model web developer and designer may easily categories their code and can easily modify in future.
For more information about HTML 5 Content Model
W3(world wide web) Documentation
