HTML Content Models
HTML document is represented with a Document object (DOM) and it has his own address called URL. HTML document consists of a series of HTML elements.
The HTML elements have theirs own content model: a description of the element’s expected contents. The contents of an element are its children in DOM. That means that every HTML element must have a content that abides established rules. As a result there are several content categories into which the HTML elements fall.
There are seven major content models:
- Metadata Content
- Flow Content
- Sectioning Content
- Phrasing Content
- Heading Content
- Embedded Content
- Interactive Content
The HTML element may be located in one or more categories or may be not included to any category. For example, all the HTML header elements and the HTML sectioning elements also belong to the HTML flow elements, some the HTML phrasing element belong to the flow elements.
Metadata content
Metadata content defines the HTML elements that establish the presentation and behaviour of the rest of the document’s content or set up the relationship between the document and other external documents.
Metadata content elements contains information about the page: styles, scripts and all data that are used to render the web page.
Majority of these elements are placed in the HTML <head> element of the document.
<base>, <link>, <meta>, <nonscript>, <script>, <style>, <template>, <title>
Flow content
Flow content defines most element that are used in body of documents.
<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>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select <small <span <strong <sub <sup <svg <table <template <textarea <time <u <ul <var <video <wbr>
Sectioning content
Sectioning content defines elements that allow to organize document into logical structure. The HTML sectioning content elements create outline that defines the scope of <header> and <footer> elements, and heading content(<h1-h6>.
<article>, <aside>, <nav>, <section>
Phrasing content
Phrasing content defines elements that content is text of the document or elements that mark up that text at the intra-paragraph level. The HTML elements that belong to this category are the same that used to belong to the HTML inline elements.
<a>, <abbr>, <area> (if it is a descendant of a map element) <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <template>, <textarea>, <time>, <u>, <var>, <video>, <wbr>
Heading content
Heading content defines the HTML elements that define headers:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Embedded content
Embedded content defines elements that their content is imported from other resources.
Some embedded content elements can have fallback content in case if external reosurces can not be used.
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>
Interactive content
Interactive content defines elements that are designed for users interaction.
<a> ( if the href attribute is present), <audio> (if the controls attribute is present), <button>, <details>, <embed>, <ifreame>, <img> (if the usemap attribure is present), <input> (if the type attribute is not in the hidden state), <keygen>, <label>, <select>, <textarea>, <video> (if the controls attribute is present)