Components of the web
The web is made up of sites, sites of pages, pages of components, and components of elements.
HTML, the markup language of the web, has 115 elements — and counting — to build components. Sometimes, one element makes one component. Other times, many elements make one component.
Most times, an element contains many components; not just any components, but certain components. Content Models guide which components an element may contain.
This resource organizes HTML by components — and with style.
Neither will you learn to conjure elements to create components; conjuring is wild. Nor will you walk in the wilderness of the untamed; the tolerance of HTML is a ticking time bomb.
You'll browse through an index of components HTML can create, You'll walk with style.
Content Models
First, authors think in components: I need a subheading
Then, rethink in elements: I need a
p element that is after a heading element, and under a hgroup element, and can only contain certain elements.
This is content model in action. It dictates where the purpose of an element can be used, and what it can contain. p as a plain paragraph has a content model different to p as a sub-heading.
The HTML Living Standard groups elements with similar characteristics into 7 major categories to help with content models: Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, and Interactive content.
These categories are loose, heterogenous, and counter-intuitive.
Loose the spec that strongly encourages an explicit p element, for a paragraph, allows a blockquote element, a flow content, to contain phrasing content, thus, creating an implicit paragraph.
Heterogenous while both p and div elements are flow content, the content model of p element is phrasing content, whereas the content model of blockquote element is flow content.
Counter-intuitive it organizes HTML by elements-to-use before content-they-create, whereas, authors think by content-to-create before elements-to-use.
An intuitive, homogenous, and compact alternative will be seven categories: Metadata, Mixes, Blocks, Phrases, Media, Forms, and Helper contents.
Here's how these new categories play out for HTML which uses elements to create components in a tree-like structure:
The root element is html. It contains a head element and a body element. All three are helper elements to structure the page.
The head element contains metadata components while the body element contains Mixes. Mixes contain Blocks, while Blocks contain Phrases of Media and Forms.