C'è un modo per creare il tuo tag html in HTML5?

Voglio creare qualcosa di simile

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Può essere fatto in HTML5? So che posso farlo con

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

ma è molto meno leggibile :(

Puoi utilizzare tag personalizzati nei browser, anche se non saranno HTML5 (vedi Gli elementi personalizzati sono HTML5 validi? E le specifiche HTML5 ).

Supponiamo che tu voglia utilizzare un elemento tag personalizzato chiamato <stack>. Ecco cosa dovresti fare ...

PASSO 1

Normalizza i suoi attributi nel tuo foglio di stile CSS (pensa a css reset) - Esempio:

 stack{display:block;margin:0;padding:0;border:0; ... }

PASSO 2

Per farlo funzionare nelle vecchie versioni di Internet Explorer, è necessario aggiungere questo script in testa (importante se è necessario che funzioni nelle versioni precedenti di IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Quindi puoi utilizzare liberamente il tuo tag personalizzato.

<stack>Overflow</stack>

Sentiti libero di impostare anche gli attributi ...

<stack id="st2" class="nice"> hello </stack>

Non sono così sicuro di queste risposte. Come ho appena letto: "I TAG PERSONALIZZATI SONO SEMPRE AMMESSI IN HTML".

http://www.crockford.com/html/

Il punto qui è che l'HTML era basato su SGML. A differenza dell'XML con i suoi doctype e schemi, l'HTML non diventa non valido se un browser non conosce uno o due tag. Pensa a <marquee>. Questo non era nello standard ufficiale. Quindi, mentre lo si utilizza ha reso la tua pagina HTML "ufficialmente non approvata", non ha nemmeno rotto la pagina.

Poi c'è <keygen>, che era specifico di Netscape, dimenticato in HTML4 e riscoperto e ora specificato in HTML5. Inoltre, ora abbiamo attributi di tag personalizzati, come data-XyZzz = "..." consentiti su tutti i tag HTML5.

Quindi, anche se non dovresti inventare un'intera insalata di markup personalizzata non specificata, non è esattamente vietato avere tag personalizzati in HTML. Questo è comunque, a meno che tu non voglia inviarlo con un + xml Content-Type o incorporare altri spazi dei nomi XML, come SVG o MathML. Questo si applica solo all'HTML confinato con SGML.

Come ha suggerito Michael nei commenti, quello che vuoi fare è del tutto possibile, ma la tua nomenclatura è sbagliata. Non stai "aggiungendo tag a HTML 5", stai creando un nuovo tipo di documento XML con i tuoi tag.

L'ho fatto per alcuni progetti nel mio ultimo lavoro. Alcuni consigli pratici:

1. Quando dici che vuoi "aggiungerli a HTML 5", presumo che ciò che intendi veramente sia che vuoi che le pagine vengano visualizzate correttamente in un browser moderno, senza dover fare molto lavoro sul lato server. Ciò può essere ottenuto inserendo una "istruzione di elaborazione del foglio di stile" all'inizio del file xml, come <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Sostituisci "menu.xsl" con il percorso del foglio di stile XSL che crei per convertire i tuoi tag personalizzati in HTML.

2. Avvertenze: il file deve essere un documento XML ben formato, completo di intestazione XML <xml version = "1.0">. XML è più selettivo dell'HTML su cose come tag non corrispondenti. Inoltre, a differenza dell'HTML, i tag fanno distinzione tra maiuscole e minuscole. È inoltre necessario assicurarsi che il server Web invii i file con il tipo MIME appropriato "application / xml". Spesso il server web sarà configurato per farlo automaticamente se l'estensione del file è ".xml", ma controlla.

3. Grande avvertimento: infine, l'utilizzo della trasformazione XSL automatica del browser, come ho descritto, è davvero la cosa migliore solo per il debug e per applicazioni limitate in cui si ha molto controllo. L'ho usato con successo nella creazione di una semplice intranet presso il mio ultimo datore di lavoro, a cui potevano accedere solo poche decine di persone al massimo. Non tutti i browser supportano XSL e quelli che non hanno implementazioni completamente compatibili. Quindi, se le tue pagine devono essere rilasciate nel "selvaggio", è meglio trasformarle tutte in HTML sul lato server, cosa che può essere eseguita con uno strumento a riga di comando o con un pulsante in molti editor XML.

La creazione di nomi di tag personalizzati in HTML non è possibile / non è valida. Ecco a cosa servono XML, SGML e altri linguaggi di markup generali.

Quello che probabilmente vuoi è

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

O invece di <div/>e <span/>qualcosa come <ul/>e <li/>.

Per farlo sembrare e funzionare correttamente, basta collegare alcuni CSS e Javascript.

Voglio solo aggiungere alle risposte precedenti che c'è un significato nell'usare solo tag di due parole per elementi personalizzati. Non dovrebbero mai essere standardizzati.

Ad esempio, vuoi usare il tag <icon>, perché non ti piace <img>e non ti piace<i> né ...

Bene, tieni presente che non sei l'unico. Forse in futuro, w3c e / oi browser specificheranno / implementeranno questo tag.

In questo momento, i browser probabilmente implementeranno lo stile nativo per questo tag e il design del tuo sito web potrebbe non funzionare.

Quindi suggerisco di usare (secondo questo esempio) <img-icon>.

In effetti, il tag <menu>è ben definito cioè non così usato, ma definito. Dovrebbe contenere <menuitem>quale si comporta come <li>.

I tag personalizzati possono essere utilizzati in Safari, Chrome, Opera e Firefox, almeno nella misura in cui li si utilizza al posto di "class = ...".

green {color: green} in CSS funziona per

<green>This is some text.</green>

Per incorporare i metadati, potresti provare a utilizzare i microdati HTML , ma è ancora più dettagliato rispetto all'utilizzo dei nomi di classe.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Oltre a scrivere un foglio di stile XSL, come ho descritto in precedenza, esiste un altro approccio, almeno se si è certi che verrà utilizzato Firefox o un altro browser XML a tutti gli effetti (cioè NON Internet Explorer). Salta la trasformazione XSL e scrivi un foglio di stile CSS completo che indichi al browser come formattare direttamente l'XML. Il vantaggio qui è che non dovresti imparare l'XSL, che molte persone trovano un linguaggio difficile e controintuitivo. Lo svantaggio è che il tuo CSS dovrà specificare lo stile in modo molto completo, incluso cosa sono i nodi di blocco, cosa sono inline, ecc. Di solito, quando scrivi CSS, puoi presumere che il browser "sappia" che <em>, ad esempio, è un nodo inline, ma non avrà idea di cosa fare con <dish>.

Infine, sono passati alcuni anni da quando l'ho provato, ma il mio ricordo è che IE (almeno alcune versioni precedenti) ha rifiutato di applicare i fogli di stile CSS direttamente ai documenti XML.

Il punto di HTML è che i tag inclusi nella lingua hanno un significato concordato, che tutti nel mondo possono utilizzare e su cui basare le decisioni - come lo stile predefinito, o rendere i collegamenti cliccabili o inviare un modulo quando si fa clic su un <input type="submit"> .

I tag inventati come i tuoi sono ottimi per gli esseri umani (perché possiamo imparare l'inglese e quindi sapere, o almeno indovinare, cosa significano i tuoi tag), ma non così buoni per le macchine.

Questa non è un'opzione in nessuna specifica HTML :)

Probabilmente puoi fare quello che vuoi con <div>elementi e classi, dalla domanda non sono sicuro di cosa stai cercando, ma no, creare i tuoi tag non è un'opzione.

Come ha detto Nick, i tag personalizzati non sono supportati da nessuna versione di HTML.

Ma non darà alcun errore se usi tale markup nel tuo HTML.

Sembra che tu voglia creare un elenco. Puoi utilizzare un elenco non ordinato <ul>per creare gli elementi rool e utilizzare il <li>tag per gli elementi sottostanti.

Se non è questo ciò che desideri ottenere, specifica esattamente ciò che desideri. Allora possiamo trovare una risposta.

È possibile aggiungere attributi personalizzati tramite dati HTML 5 - Attributi. Ad esempio: Messaggio valido per HTML 5. Vedere http://ejohn.org/blog/html-5-data-attributes/ per ottenere i dettagli.

Polymer o X-tag ti consentono di creare i tuoi tag html. Si basa sul "DOM ombra" del browser nativo.

Puoi semplicemente creare uno stile CSS personalizzato, questo creerà un tag che renderà il colore di sfondo rosso:

redback {background-color:red;}

 

<redback>This is red</redback>

In alcune circostanze, potrebbe sembrare che la creazione di nomi di tag personalizzati funzioni correttamente.
Tuttavia, questa è solo la routine di gestione degli errori del tuo browser al lavoro. E il problema è che browser diversi hanno routine di gestione degli errori diverse!

Vedi questo esempio.
La prima riga contiene due elementi inventati, whate ever, e vengono trattati in modo diverso da browser diversi. Il testo viene visualizzato in rosso in IE11 e Edge, ma nero in altri browser.
Per confronto, la seconda riga è simile, tranne che contiene solo elementi HTML validi e quindi avrà lo stesso aspetto in tutti i browser.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Un altro problema con gli elementi inventati è che non saprai cosa riserva il futuro. Se è stato creato un sito web un paio di anni fa, con i nomi dei tag come picture, dialog, details, slot, templateecc, li aspettava a comportarsi come campate, sei nei guai!

puoi usare questo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

Ho trovato questo articolo sulla creazione di tag HTML personalizzati e sulla loro istanza. Semplifica il processo e lo scompone in termini che chiunque può capire e utilizzare immediatamente, ma non sono del tutto sicuro che gli esempi di codice che contiene siano validi in tutti i browser, quindi avvertilo e prova a fondo. Tuttavia, è un'ottima introduzione all'argomento per iniziare.

Elementi personalizzati: definizione di nuovi elementi in HTML