How to create Forms in HTML..?
What is the Content Model..?
▪ The content model refers to the set of rules that define what type of content each element is allowed to have.
▪ Mostly, this translates into what other elements are allowed to be nested inside which other elements.
HTML content model
▪ Every HTML element has a default display value, depending on what type of element it is.
▪ There are two display values: block and inline.
▪ Modern HTML specification split these two content models into seven models.
Block Elements
▪ When displayed, the browser automatically adds a line break before and after the block element, which takes up all available width.
▪ Example: div, form, h1, h2, h3, h4, h5, h6, li, ol, p, pre, table, ul
Try out this example on block elements.
Code:-
<html> <body> <div> <h1>Block-level Element</h1> <h3>Always starts on a new line</h3> <h3> A block-level element always takes up the full width available. </h3> </div></body> </html>
<html> <body> <div>Inline Elements</div> Doesn’t start in a new line <a href="https://www.w3schools.com/html/html_blocks.asp" alt="w3schools"> Further Reading</a> website for more examples. </body></html>Output:-
Modern HTML Content Models
▪ Modern HTML specification replaces those two content model definitions with more complex definitions.
▪ The reason it’s still practical to group them into just those two is because they align very well with existing CSS rules.
▪ The seven modern HTML content models are;
▪ Metadata content
▪ Flow content
▪ Sectioning content
▪ Heading content
▪ Phrasing content
▪ Embedded content
▪ Interactive content
Metadata Content
▪ Content that sets up the presentation or behaviour of the rest of the content.
▪ Elements: base, command, link, meta, noscript, style, title.
Flow Content
▪ These are the elements that would be included in the normal flow of the document.
▪ Elements: b, br, button, datalist, details, div, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, input, label, link, math, menu, script, table, textarea, time, ul.
Sectioning Content
▪ Content that defines the scope of headings and footers.
▪ Elements: article, aside, nav, section
Heading Content
▪ Defines the header of a section, which can either be explicitly marked up with sectioning elements or implied by the heading content itself.
▪ Elements: h1, h2, h3, h4, h5, h6, hgroup
Phrasing Content
▪ The text of the document, as well as elements used to mark up the text within paragraph level structures.
▪ Elements: a, area, audio, b, br, button, canvas, cite, code, datalist, embed, i, iframe, img, input, label, link, map, mark, math, noscript, object, output, progress, q, samp, script, select, small, span, strong, sub, sup, svg, time, var, video
Embedded Content
▪ Any content that imports other resources into the document.
▪ Elements: audio, canvas, embed, iframe, img, math, object, svg, video.
Interactive Content
▪ Any content specifically intended for user interaction.
▪ Elements: a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video.
Written by: W.A. Eranga Dewmini
No comments:
Post a Comment