Gli elementi personalizzati sono validi HTML5?

Non sono stato in grado di trovare una risposta definitiva alla validità dei tag personalizzati in HTML5, in questo modo:

<greeting>Hello!</greeting>

Non ho trovato nulla nelle specifiche in un modo o nell'altro:

http://dev.w3.org/html5/spec/single-page.html

E i tag personalizzati non sembrano convalidare con il validatore W3C.

La specifica di Custom Elements è disponibile in Chrome e Opera e diventa disponibile in altri browser . Fornisce un mezzo per registrare elementi personalizzati in modo formale.

Gli elementi personalizzati sono nuovi tipi di elementi DOM che possono essere definiti dagli autori. A differenza dei decoratori , che sono apolidi ed effimeri, gli elementi personalizzati possono incapsulare lo stato e fornire interfacce di script.

Gli elementi personalizzati fanno parte di una specifica W3 più grande denominata Componenti Web , insieme a Modelli, Importazioni HTML e Shadow DOM.

I componenti Web consentono agli autori di applicazioni Web di definire widget con un livello di ricchezza visiva e interattività che non è possibile solo con i CSS e che la facilità di composizione e riutilizzo non è possibile oggi con le librerie di script.

Tuttavia, da questo eccellente articolo di approfondimento su Google Developers su Custom Elements v1:

Il nome di un elemento personalizzato deve contenere un trattino ( -). Quindi <x-tags>, <my-element>e <my-awesome-app>sono tutti nomi validi, mentre <tabs>e <foo_bar>non lo sono. Questo requisito è quindi il parser HTML in grado di distinguere gli elementi personalizzati dagli elementi regolari. Garantisce inoltre la compatibilità diretta quando vengono aggiunti nuovi tag all'HTML.

Alcune risorse

• I componenti Web di esempio sono disponibili su https://WebComponents.org
• WebComponents.js funge da polyfill per i componenti Web fino a quando non sono supportati ovunque. Vedi anche la pagina github di WebComponents.js e la tabella di supporto del browser web .

È possibile e consentito:

Gli interpreti devono trattare elementi e attributi che non comprendono come semanticamente neutri; lasciandoli nel DOM (per i processori DOM) e disegnandoli secondo i CSS (per i processori CSS), ma non deducendone alcun significato.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Ma, se hai intenzione di aggiungere interattività, dovrai rendere il tuo documento non valido (ma comunque perfettamente funzionante) per adattarsi a IE 7 e 8.

Vedi http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (il mio blog)

NB La risposta che segue è stata corretta quando è stata scritta nel 2012. Da allora, le cose sono cambiate un po '. La specifica HTML ora definisce due tipi di elementi personalizzati: "elementi personalizzati autonomi" e "elementi integrati personalizzati". Il primo può andare ovunque sia previsto il contenuto di fraseggi; che è la maggior parte dei posti all'interno del corpo, ma non ad esempio figli di elementi ul o ol, o in elementi di tabella diversi dagli elementi td, th o didascalia. Quest'ultimo può andare ovunque sia possibile l'elemento che estendono.

Questa è in realtà una conseguenza dell'accumulo del modello di contenuto degli elementi.

Ad esempio, l'elemento radice deve essere un htmlelemento.

L' htmlelemento può contenere solo un elemento head seguito da un elemento body.

L' bodyelemento può contenere solo contenuto Flow in cui il contenuto flow è definito come elementi: a, abbr, indirizzo, area (se è un discendente di un elemento della mappa), articolo, a parte, audio, b, bdi, bdo, blockquote, br, pulsante, tela, cita, codice, comando, datalist, del, dettagli , dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, etichetta, mappa, segno, matematica, menu, metro, nav, noscript, oggetto, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style ( se l'attributo con ambito è presente), sub, sup, svg, table, textarea, time,u, ul, var, video, wbr e Text

e così via.

In nessun caso il modello di contenuto dice "puoi inserire qualsiasi elemento che ti piace in questo", che sarebbe necessario per elementi / tag personalizzati.

Elementi e attributi personalizzati di base

Gli elementi e gli attributi personalizzati sono validi in HTML, a condizione che:

• I nomi degli elementi sono in minuscolo e iniziano con x-
• I nomi degli attributi sono in minuscolo e iniziano con data-

Ad esempio, <x-foo data-bar="gaz"/>oppure<br data-bar="gaz"/> .

Una convenzione comune per gli elementi è x-foo;x-vendor-featureè raccomandato.

Questo gestisce la maggior parte dei casi, dal momento che è probabilmente raro che uno sviluppatore abbia bisogno di tutto il potere che deriva dalla registrazione dei propri elementi. La sintassi è anche adeguatamente valida e stabile. Una spiegazione più dettagliata è di seguito.

Elementi e attributi personalizzati avanzati

A partire dal 2014, c'è un nuovo modo molto migliorato per registrare elementi e attributi personalizzati. Non funzionerà nei browser più vecchi come IE 9 o Chrome / Firefox 20. Ma ti consente di utilizzare l' HTMLElementinterfaccia standard , prevenire le collisioni, utilizzare non x-*e nondata-* nomi nomi e definire comportamenti personalizzati e sintassi che il browser deve rispettare . Richiede un po 'di fantasia JavaScript, come dettagliato nei link sottostanti.

HTML5 Rocks - Definizione di nuovi elementi in HTML
WebComponents.org - Introduzione agli elementi personalizzati
W3C - Componenti Web: elementi personalizzati

Per quanto riguarda la validità della sintassi di base

utilizzando data-* di nomi di attributi personalizzati è stato perfettamente valido per qualche tempo e funziona anche con versioni precedenti di HTML.

W3C - HTML5: estensibilità

Per quanto riguarda i nomi degli elementi personalizzati (non registrati), il W3C raccomanda vivamente di non rispettarli. Ma i browser sono tenuti a supportarli e gli x-*identificatori non entreranno in conflitto con le future specifiche HTML ex-vendor-feature identificatori non entreranno in conflitto con altri sviluppatori. Un DTD personalizzato può essere utilizzato per aggirare qualsiasi browser esigente.

Ecco alcuni estratti pertinenti dei documenti ufficiali:

"Le specifiche applicabili POSSONO definire nuovi contenuti del documento (ad esempio un elemento foobar) [...]. Se la sintassi e la semantica di un dato documento HTML5 conforme è invariata dall'uso delle specifiche applicabili, quel documento rimane un HTML5 conforme documento."

"Gli interpreti devono trattare elementi e attributi che non comprendono come semanticamente neutri; lasciandoli nel DOM (per i processori DOM), e disegnandoli secondo i CSS (per i processori CSS), ma non deducendone alcun significato."

"Gli interpreti non sono liberi di gestire i documenti non conformi a loro piacimento; il modello di elaborazione descritto in questa specifica si applica alle implementazioni indipendentemente dalla conformità dei documenti di input."

"L'interfaccia HTMLUnknownElement deve essere utilizzata per elementi HTML che non sono definiti da questa specifica."

W3C - HTML5: documenti conformi
WhatWG - Standard HTML: DOM Elements

Vorrei sottolineare che la parola "valido" può avere due significati diversi in questo contesto, uno dei quali è potenzialmente, ehm, valido.

1. Un documento HTML con tag personalizzati deve essere considerato HTML5 valido? La risposta a questa è chiaramente "no". La specifica elenca esattamente quali tag sono validi in quali contesti. Questo è il motivo per cui un validatore HTML non accetterà un documento con tag personalizzati o con tag standard in posizioni errate (come un tag "img" nell'intestazione).

2. Un documento HTML con tag personalizzati verrà analizzato e reso in modo standard e chiaramente definito tra i browser? Qui, forse sorprendentemente, la risposta è "sì". Anche se il documento non sarebbe tecnicamente considerato HTML5 valido, la specifica HTML5 specifica esattamente cosa dovrebbero fare i browser quando vedono un tag personalizzato: in breve, il tag personalizzato si comporta come un <span>- non significa nulla e non fa nulla da impostazione predefinita, ma può essere in stile HTML e accessibile tramite JavaScript.

Gli elementi HTML personalizzati sono uno standard W3 emergente a cui ho contribuito che ti consente di dichiarare e registrare elementi personalizzati con il parser, puoi leggere qui le specifiche: Specifiche degli elementi personalizzati di W3 Web Components . Inoltre, Microsoft supporta una libreria (scritta da ex sviluppatori Mozilla), denominata X-Tag , che rende ancora più semplice lavorare con i componenti Web.

Per dare una risposta aggiornata che rifletta le pagine moderne.

I tag personalizzati sono validi se

1) Contengono un trattino

<my-element>

2) Sono XML incorporati

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Ciò presuppone che tu stia utilizzando il doctype HTML5 <!doctype html>

Considerando queste semplici restrizioni, ora ha senso fare del tuo meglio per mantenere valido il markup HTML (per favore, smetti di chiudere tag come <img>e<hr> , è sciocco e errato a meno che tu non usi un doctype XHTML, che probabilmente non ti serve).

Dato che HTML5 definisce chiaramente le regole di analisi, un browser conforme sarà in grado di gestire qualsiasi tag che gli viene lanciato anche se non è strettamente valido.

Citando dalla sezione Extensibility della specifica HTML5 :

Per le funzionalità a livello di markup che possono essere limitate alla serializzazione XML e che non devono essere supportate nella serializzazione HTML, i fornitori devono utilizzare il meccanismo dello spazio dei nomi per definire spazi dei nomi personalizzati in cui sono supportati gli elementi e gli attributi non standard.

Quindi, se stai usando la serializzazione XML di HTML5, è legale che tu faccia qualcosa del genere:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Tuttavia, se stai utilizzando la sintassi HTML, sei molto più limitato in ciò che puoi fare.

Per le funzionalità a livello di markup destinate all'uso con la sintassi HTML, le estensioni devono essere limitate ai nuovi attributi del modulo "funzionalità x-vendor" [...] Non devono essere creati nuovi nomi di elementi.

Ma queste istruzioni sono dirette principalmente ai fornitori di browser, che presumibilmente dovrebbero fornire uno stile visivo e funzionalità per qualsiasi elemento personalizzato che hanno scelto di creare.

Per un autore, tuttavia, mentre può essere legale incorporare un elemento personalizzato nella pagina (almeno nella serializzazione XML), non otterrai nulla di più di un nodo nel DOM. Se vuoi che il tuo elemento personalizzato faccia effettivamente qualcosa o sia reso in un modo speciale, dovresti guardare la specifica degli elementi personalizzati .

Per un approfondimento più delicato sull'argomento, leggi Introduzione ai componenti Web , che include anche informazioni su Shadow DOM e altre specifiche correlate. Al momento queste specifiche funzionano ancora alle bozze: puoi vedere lo stato corrente qui - ma sono attivamente sviluppati.

Ad esempio, una semplice definizione per un greetingelemento potrebbe assomigliare a questa:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Questo dice al browser di rendere il contenuto dell'elemento tra virgolette e preceduto dal testo "Simon afferma:" che è disegnato con il colore grigio. In genere una definizione di elemento personalizzata come questa verrebbe archiviata in un file html separato che verrebbe importato con un collegamento.

<link rel="import" href="greeting-definition.html" />

Anche se puoi anche includerlo in linea, se lo desideri.

Ho creato una dimostrazione funzionante della definizione sopra usando la libreria Polyfill Polymer che puoi vedere qui . Si noti che questo utilizza una versione precedente della libreria Polymer: le versioni più recenti funzionano in modo abbastanza diverso. Tuttavia, con le specifiche ancora in fase di sviluppo, questo non è qualcosa che consiglierei di utilizzare comunque nel codice di produzione.

basta usare quello che vuoi senza alcuna dichiarazione dom

<container>content here</container>

aggiungi il tuo stile (display: block) e funzionerà con qualsiasi browser moderno

data-*gli attributi sono validi in HTML5 e anche in HTML4 tutti i browser Web utilizzati per rispettarli. L'aggiunta di nuovi tag è tecnicamente corretta, ma non è consigliata solo perché:

1. Potrebbe essere in conflitto con qualcosa aggiunto in futuro e
2. Rende il documento HTML non valido a meno che non venga aggiunto dinamicamente tramite JavaScript.

Io uso tag personalizzati solo in luoghi che Google non si preoccupa, per ecample in un iframe motore di gioco, ho fatto un <log>tag che conteneva <msg>, <error>e <warning>- ma attraverso JavaScript solo. Ed era pienamente valido, secondo il validatore. Funziona anche in Internet Explorer con il suo stile! ;]

I tag personalizzati non sono validi in HTML5. Ma attualmente i browser supportano per analizzarli e anche tu puoi usarli usando CSS. Quindi, se si desidera utilizzare tag personalizzati per i browser attuali, è possibile. Ma il supporto può essere rimosso una volta che i browser implementano rigorosamente gli standard W3C per l'analisi del contenuto HTML.

So che questa domanda è vecchia, ma ho studiato questo argomento e sebbene alcune delle affermazioni sopra riportate siano corrette, non sono l'unico modo per creare elementi personalizzati. Per esempio:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

funzionerebbe perfettamente bene (nelle versioni più recenti di Google Chrome, IE, FireFox e Safari mobile finora). Tutto ciò di cui hai bisogno è solo un carattere alfa (az, AZ) per avviare il tag, quindi puoi utilizzare uno qualsiasi dei caratteri non alfa dopo. Se in CSS, è necessario utilizzare "\" (barra rovesciata) per trovare l'elemento, come ad esempio una query \ ^ {...}. Ma in JS, lo chiami semplicemente come lo vedi. Spero che questo sia d'aiuto. vedi esempio qui

-Mink CBOS