HTML Content Categories Flashcards
Source of info for this deck
https: //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
https: //html.spec.whatwg.org/multipage/dom.html#kinds-of-content
Describe in your own words how the content categories relate and why they are separated
[[[Return to this once confident with the rest of the deck]]]
What is a content category and why do we use that framework?
Every element is a part of one or more content categories; a group of shared characteristics, behaviour and associated rules.
What are the main types of content categories and how are they different?
(3 types of categories)
Main content categories- describe common rules shared by many elements
Form related content categories- Describe rules common to form related elements
Specific content categories- describe rare categories shared only by a few elements, sometimes only in a specific context.
What are the 3 main categories of flow content?
What are the 7 main content categories and how are they different?
The three main subcategories of flow content are: heading, sectioning and phrasing content.
Metadata- sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other “out of band” information.
Flow- broad category that encompasses most elements that can go inside the
element. It includes almost all the other main content categories (except some metadata)
Sectioning- Groups other elements into collections. Elements belonging to the sectioning content model create a section in the current outline that defines the scope of heading content and &lheader> and &lfooter> elements.
Heading- Defines the title of a section, whether marked by an explicit sectioning content element, or implicitly defined by the heading content itself.
Phrasing- This is mostly text and markup of text. Defines the text and the markup it contains. Runs of phrasing content make up paragraphs. If it can be inside a sentence, it’s most likely phrasing content
Embedded- Imports another resource or inserts content from another mark-up language or namespace into the document.
Interactive- Includes elements that are specifically designed for user interaction
What makes form-related content? What are the 4 form-related content categories and how are they different?
Form-associated content is a subset of flow content comprising elements that have a form owner, exposed by a form attribute, and can be used everywhere flow content is expected. A form owner is either the containing
element or the element whose id is specified in the form attribute.
- listed- Elements that are listed in the: form.elements and fieldset.elements IDL collections.
- labelable- Elements that can be associated with elements.
- submittable- Elements that can be used for constructing the form data set when the form is submitted.
- resettable- Elements that can be affected when a form is reset.
What are the 3 Specific/Secondary/Other content categories and how are they different?
Palpable- Content is palpable when it’s neither empty or hidden.
Script supporting elements- Script-supporting elements are elements which don’t directly contribute to the rendered output of a document. Instead, they serve to support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts.
Transparent content model- ???rules about what content and element can contain based on it’s parent
Does every element have a content category?
No
example: ???
What describes metadata content?
Elements that modify the presentation or the behaviour of the rest of the document, set up links to other documents, or convey other out of band information
Elements belonging to this category are: <base>, <command>, <link>, (depricated) <meta>, <noscript>, <script>, <style> and <title>.
What is out of band information?
Consider a networking application that tunnels data from a remote data source to a remote destination. The data being tunneled may consist of any bit patterns. The sending end of the tunnel may at times have conditions that it needs to notify the receiving end about. However, it cannot simply insert a message to the receiving end because that end will not be able to distinguish the message from data sent by the data source. By using an out-of-band mechanism, the sending end can send the message to the receiving end out of band. The receiving end will be notified in some fashion of the arrival of out-of-band data, and it can read the out of band data and know that this is a message intended for it from the sending end, independent of the data from the data source.
What describes flow content?
Content that effects what the user sees.
Broad category that encompasses most elements that can go inside the body element.
It also includes text nodes (but not those that only consist of white space characters).
The flow elements are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, (depricated)<command>, <data>, <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>, (depricated)<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>, and <wbr>.
A few other elements belong to this category, but only if a specific condition is fulfilled:
<area>, if it is a descendant of a <map> element
<link>, if the itemprop attribute is present
<meta>, if the itemprop attribute is present
<style>, if the (depricated) scoped attribute is present
What describes phrasing content?
This is mostly text and markup of text.
Phrasing content is a subset of flow content that defines the text and the markup it contains, and can be used everywhere flow content is expected. Runs of phrasing content make up paragraphs. If it can be inside a sentence, it’s most likely phrasing content
Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
A few other elements belong to this category, but only if a specific condition is fulfilled:
<a>, if it contains only phrasing content
<area>, if it is a descendant of a <map> element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present
What describes embedded content?
Imports another resource or inserts content from another mark-up language or namespace into the document, and can be used everywhere flow content is expected.
Elements that belong to this category include: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>.
What describes heading content?
Defines the title of a section, whether marked by an explicit sectioning content element, or implicitly defined by the heading content itself. Heading content can be used everywhere flow content is expected.
<h1> <h2> <h3>
What describes sectioning content?
Group other elements into collections
Can be used everywhere flow content is expected. Elements belonging to the sectioning content model create a section in the current outline that defines the scope of &lheader> elements, &lfooter> elements, and heading content.
Ex (these may be all the possible sectioning elements): <article>, <aside>, <nav>, and <section>.
(Do not confuse this content model with the sectioning root category, which isolates its content from the regular outline.)
What describes interactive content?
Includes elements that are specifically designed for user interaction, and can be used everywhere flow content is expected.
Elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>
Some elements belong to this category only under specific conditions:
<audio>, if the controls attribute is present
<img>, if the usemap attribute is present
<input>, if the type attribute is not in the hidden state
<menu>, if the type attribute is in the toolbar state
<object>, if the usemap attribute is present
<video>, if the controls attribute is present
What is a content model?
The contents of an element are its children in the DOM tree.
Each element has a content model: a description of the element’s expected contents.
HTML Authors must not use HTML elements anywhere except where they are explicitly allowed, as defined for each element, or as explicitly required by other specifications (such as ATOM)
Ex:
