HTML5: differenza tra elementi "Categorie" e "Tipi di contenuti"
METADATA • FLOW • SECTIONING • HEADING • PHRASING • EMBEDDED • INTERACTIVE
A differenza di (X)HTML che delinea in due categorie di elementi "block" e "inline", in HTML5 questa distinzione binaria viene sostituita con un insieme più complesso di categorie, vediamo come:
Anche in HTML5 ogni elemento deve rispettare le regole che definiscono che tipo di contenuto è consentito, queste regole sono definite Categorie o modelli di contenuto comuni a diversi elementi. Ogni elemento in HTML5 rientra in nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole da seguire in un documento.
Queste categorie sono correlate come segue:
Flow
Heading
Sectioning
Interactive
Metadata
Phrasing
Embedded
- Metadata content
- Flow content
- Sectioning content
- Heading content
- Phrasing content
- Embedded content
- Interactive content
Flow content
a , abbr , address , area* , article , aside , audio , b , bdi , bdo , blockquote , br , button , canvas , cite , code , data , datalist , del, details , dfn , dialog , div , dl , em , embed , fieldset , figure , footer , form , h1-6 , header , hr , i , iframe , img , input , ins , kbd , keygen , label , link* , main , map , mark , math , menu , meta* , meter , nav , noscript , object , ol , output , p , pre , progress , q , ruby , s , samp , script , section , select , small , span , strong , style* , sub , sup , svg , table , template , textarea , time , u , ul , var , video , wbr , [Testo]**In determinate circostanze
Heading content
h1 , h2 , h3 , h4 , h5 , h6Sectioning content
article , aside , nav , sectionInteractive content
a , audio* , button , details , embed , iframe , img* , input* , keygen , label , object* , select , textarea , video**In determinate circostanze
Metadata content
base , link , meta , noscript , script , style , template , titlePhrasing content
a* , abbr , area* , audio , b , bdi , bdo , br , button , canvas , cite , code , data , datalist , del* , dfn , em , embed , i , iframe , img , input , ins* , kbd , keygen , label , link* , map* , mark , math , meta* , meter , noscript , object , output , progress , q , ruby , s , samp , script , select , small , span , strong , sub , sup , svg , template , textarea , time , u , var , video , wbr , [Testo]**In determinate circostanze
Embedded content
audio , canvas , embed , iframe , img , math , object , svg , videoElementi Metadati (Metadata elements)
I Contenuti metadati (Metadata content) sono contenuti che consentono di impostare la presentazione e/o il comportamento del resto del contenuto e/o drfiniscono il rapporto del documento con altri documenti e/o trasmettono informazioni.
<base> , <link> , <meta> , <noscript> , <script> , <style> , <template> , <title>
Elementi di Flusso (Flow elements)
I Contenuti di Flusso (Flow content) rappresentano la maggior parte degli elementi che vengono utilizzati nel corpo dei documenti e sono classificati come contenuto flusso.
<a> , <abbr> , <address> , <area> (se è un discendente di un elemento map) , <article> , <aside> , <audio> , <b> , <bdi> , <bdo> , <blockquote> , <br> , <button> , <canvas> , <cite> , <code> , <data> , <datalist> , <del> , <details> , <dfn> , <dialog> , <div> , <dl> , <em> , <embed> , <fieldset> , <figure> , <footer> , <form> , <h1-6> , <header> , <hr> , <i> , <iframe> , <img> , <input> , <ins> , <kbd> , <keygen> , <label> , <link> (se l'attributo "itemprop" è presente) , <main> , <map> , <mark> , <math> , <menu> , <meta> (se l'attributo "itemprop" è presente) , <meter> , <nav> , <noscript> , <object> , <ol> , <output> , <p> , <pre> , <progress> , <q> , <ruby> , <s> , <samp> , <script> , <section> , <select> , <small> , <span> , <strong> , <style> (se l'attributo "scoped" è presente) , <sub> , <sup> , <svg> , <table> , <template> , <textarea> , <time> , <u> , <ul> , <var> , <video> , <wbr> , [Testo]
Elementi di Sezionamento (Sectioning elements)
I Contenuti di Sezionamento (Sectioning content) creano una sezione nella struttura attuale, sono contenuti che definiscono l'ambito di intestazioni e piè di pagina, ogni elemento Sectioning content solitamente ha un intestazione dei contenuti. Alcuni elementi sono definiti come Sectioning roots e sono distinti dai Sectioning content.
Elementi d'Intestazione (Heading elements)
I Contenuti d'Intestazione (Heading content) definiscono l'intestazione di una sezione (esplicitamente contrassegnato utilizzando elementi di contenuto Sectioning content, o implicita dal contenuto del titolo stesso).
Elementi di Fraseggio (Phrasing elements)
I Contenuti di Fraseggio (Phrasing content) definiscono il testo del documento, così come gli elementi che contraddistinguono quel testo (Intra-paragraph level) vengono eseguiti come Phrasing content sotto forma di paragrafi. La maggior parte degli elementi che sono classificati come Phrasing content pussono contenere solo elementi che sono a loro volta suddivisi in categorie come Phrasing content e non elementi Flow content.
<a> , <abbr> , <area> (se è un discendente di un elemento map) , <audio> , <b> , <bdi> , <bdo> , <br> , <button> , <canvas> , <cite> , <code> , <data> , <datalist> , <del> , <dfn> , <em> , <embed> , <i> , <iframe> , <img> , <input> , <ins> , <kbd> , <keygen> , <label> , <link> (se l'attributo "itemprop" è presente) , <map> , <mark> , <math> , <meta> (se l'attributo "itemprop" è presente) , <meter> , <noscript> , <object> , <output> , <progress> , <q> , <ruby> , <s> , <samp> , <script> , <select> , <small> , <span> , <strong> , <sub> , <sup> , <svg> , <template> , <textarea> , <time> , <u> , <var> , <video> , <wbr> , [Testo]
Elementi Incorporati (Embedded elements)
I Contenuti Incorporati (Embedded content) sono i contenuti importati nel documento da un'altra risorsa o il contenuto di un altro contesto che viene inserito nel documento, alcuni elementi Embedded content possono avere contenuti di ripiego (contenuto che deve essere usato quando la risorsa esterna non può essere utilizzata, ad esempio perché si tratta di un formato non supportato) che fornisco indicazioni o dettagli sul contenuto.
<audio> , <canvas> , <embed> , <iframe> , <img> , <math> , <object> , <svg> , <video>
Elementi Interattivi (Interactive elements)
I Contenuti Interattivi (Interactive content) sono contenuti specificamente progettati per l'interazione dell'utente, questi elementi HTML hanno un comportamento di attivazione, il che significa che l'utente può attivare una sequenza di eventi.
<a> , <audio> (se l'attributo "controls" è presente) , <button> , <details> , <embed> , <iframe> , <img> (se l'attributo "usemap" è presente) , <input> (se l'attributo "type" non è nello stato nascosto "hidden") , <keygen> , <label> , <object> (se l'attributo "usemap" è presente) , <select> , <textarea> , <video> (se l'attributo "controls" è presente)
Note: L'attributo "tabindex" può trasformare qualsiasi elemento in contenuti interattivi.
Note: Sectioning roots
Una radice sezionamento (Sectioning root) è una parte del documento che definisce una sezione di radice (Root) o di livello superiore (top-level).
Questi elementi HTML possono avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore.
Oltre all'elemento
<body>
che è la sezione "root" logica di un documento, sono detti Sectioning root i seguenti elementi:
<blockquote> ,
<details> ,
<dialog> ,
<fieldset> ,
<figure> ,
<td>
Note: Paragraphs
Un paragrafo è tipicamente eseguito come contenuto fraseggio
(Phrasing content),
forma un blocco di testo di una o più frasi che trattano un argomento particolare, ma può essere utilizzato anche in generale per raggruppare piu tematica,
ad esempio, un indirizzo è anche un paragrafo, come lo è una parte di una modulo, un sottotitolo, o una strofa in una poesia.
Note: [Testo]
Testo (Text), nel contesto di modelli di contenuto, significa o niente (testo vuote o caratteri di spazio) o nodi di testo,
il Testo viene talvolta usato come un modello di contenuto proprio, ma è anche fraseggio dei contenuti
(Phrasing content)
e può essere "inter-element whitespace" (nodi di testo vuoto o solo caratteri di spazio).
Note: Palpable content
Possiamo definire il concetto di Palpable content come obbligo, non devono essere vuoti.
Come regola generale, gli elementi il cui modello di contenuto consente qualsiasi
Flow content
o
Phrasing content
dovrebbe avere almeno un nodo figlio che è Palpable content e che non abbia l'attributo "hidden" specificato,
questo requisito potrebbe sembrare eccessivo, tuttavia,
potrebbe essere utile in futuro nella definizione di altri requisiti
in quanto vi sono molti casi in cui un elemento può essere legittimamente vuoto,
per esempio quando viene utilizzato come segnaposto che sarà successivamente riempito da uno script,
o quando l'elemento è parte di un modello sulla maggior parte delle pagine da compilare, ma su alcune pagine non è rilevante.
Note: Script-supporting elements
Elementi di supporto Script, sono quelli che non rappresentano nulla di per se, vengono utilizzati per supportare gli script, fornendo funzionalità per l'utente.
I seguenti elementi sono elementi di script di supporto:
<script> ,
<template>
Note: Modelli di contenuto trasparenti (Transparent content models)
Alcuni elementi sono descritti come trasparenti (transparent) nella descrizione del loro modello di contenuto,
il modello di contenuto di un elemento "transparent" è derivato dal modello di contenuto del suo elemento genitore,
gli elementi richiesti da parte del modello di contenuto "transparent"
sono gli stessi elementi come richiesto da parte del modello di contenuto dell'elemento "transparent" genitore in cui l'elemento "transparent" si trova.
Si consideri il seguente frammento di markup:
Per verificare se "Mele" è consentito all'interno di un elemento, esaminiamo i modelli di contenuto. il modello di contenuto di un elemento "transparent", quale è l'elemento <map>, e come è l'elemento <ins>, così come la parte in cui si trova l'elemento <ins> dell'elemento <object>. L'elemento <object> si trova nell'elemento <p>, il cui modello di contenuto è fraseggio (Phrasing content), per cui, il testo "Mele" è consentito come contenuto fraseggio. Note: Quando un elemento "transparent" non ha un genitore, quindi la parte del suo modello di contenuto che è "transparent" deve invece essere trattata e accettare qualsiasi contenuto di flusso (Flow content).
FONTE: W3C
IP: 3.12.34.150
