Dovrei usare tag non standard in una pagina HTML per evidenziare le parole?

Vorrei sapere se è una buona pratica o legale utilizzare tag non standard in una pagina HTML per determinati scopi personalizzati.

Per esempio:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

Voglio evidenziare "consectetur adipiscing elit" come importante e "nisi arcu accumsan arcu" come evidenziato.

Quindi nell'HTML metterei:

Lorem ipsum dolor sit amet, <important> consectetur adipiscing elit </important>. Nullam consequat, felis sit amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </highlighted>, vel pulvinar odio magna suscipit mi.

e nel CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Tuttavia, poiché questi non sono tag HTML validi, va bene?

No, questa non è una buona pratica. Dovresti usare tag già semantici e significativi - forse <em>in questo caso - e applicare gli stili CSS per raggiungere i tuoi requisiti di progettazione.

La tua domanda è se è " buona pratica o legale ".

Innanzi tutto: è un po 'legale - almeno, è tollerato. I browser sono sempre stati programmati per far fronte a tag che non comprendono, anche se ciò significa che li ignorano. Questo codice HTML:

Some <b>bold</b> and some <slanted>italic</slanted>.

Apparirà come questo è ogni singolo browser:

Alcuni in grassetto e in corsivo.

Inoltre, la maggior parte dei browser ti permetterà di modellare quell'elemento nei CSS. Quindi se aggiungi la seguente definizione CSS:

slanted { font-style: italic; }

la maggior parte dei browser ora eseguirà il rendering come segue:

Alcuni in grassetto e in corsivo .

Davvero: provalo tu stesso . Per inciso, questo è un trucco che gli sviluppatori Web usano per provare e garantire che i nuovi tag HTML5 vengano visualizzati correttamente nei browser più vecchi.

Tuttavia, non è esattamente il quadro completo. La risposta completa è no, non è una buona pratica . Potresti aver notato il mio uso della frase " maggior parte dei browser". Sfortunatamente, tutte le versioni di Internet Explorer precedenti a IE9 non implementano questo comportamento. In IE8 e precedenti, il codice sopra sarà ancora simile a questo:

Alcuni in grassetto e in corsivo.

C'è una descrizione eccellente e dettagliata del problema in Dive Into HTML5 , dove troverai anche i dettagli di una soluzione alternativa. Tuttavia, la soluzione alternativa richiede JavaScript, quindi non è una soluzione HTML pura e non funzionerà in tutti gli scenari.

Quindi, risposta breve: attenersi solo agli elementi HTML standard e modellarli come preferisci nel CSS.

Se è necessario mantenere la semantica di <important/>per motivi specifici, è possibile utilizzare XSL per trasformare i tag personalizzati in HTML valido. Puoi leggere di più su questo argomento qui:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

Non puoi ancora avere <important/>nell'output HTML finale, ma puoi trasformarlo automaticamente in qualcosa del genere <span class="important"....

Ci sono alcune risposte qui che spiegano perché non dovresti mai creare i tuoi tag personalizzati. Probabilmente, sono tutti errati.

L'analisi dei tag personalizzati di WHATWG conclude che sono accettabili, conformi agli standard (poiché la gestione dei tag non riconosciuti è ben definita) e più accessibili rispetto, ad esempio, allo stile di un div generico.

<x-accordion> </x-accordion> non è peggio di <div class = "accordion"> </div> in tutti i sensi meccanici. In assenza della definizione di "fisarmonica x" (o supporto del modello di componente), entrambi significano la stessa cosa, entrambi possono essere disegnati allo stesso modo. Uno è HTMLUnknownElement, l'altro è HTMLDivElement e la loro superficie API è identica.

Quello che dovresti fare, cosa che l'OP non ha fatto, è il prefisso di tutti i tag personalizzati con 'x-' per convenzione. Ciò indica chiaramente che intendi che questo tag sia locale nel tuo documento ed evita conflitti con futuri elementi di specifica.

Alcuni sostengono che poiché alcuni browser popolari non gestiscono i tag personalizzati in modo conforme agli standard, non è necessario utilizzarli. Tuttavia, il comportamento dei browser non conformi è un problema suo e preferibilmente non ti costringerà a scrivere markup non semantici. Esistono sia soluzioni Javascript che non Javascript a quel problema, che dovrebbero essere applicate solo per quei browser non conformi che desideri supportare specificamente.

Detto questo, se esiste un tag nella specifica (<mark>) che copre chiaramente il significato semantico del tag che hai creato (<highlight>), allora è sicuramente preferibile usare il tag esistente.

È possibile utilizzare <em />e <strong />con CSS personalizzato per modificare la modalità di visualizzazione.

Forte, si riferisce a una maggiore importanza.

Enfasi, si riferisce a una maggiore enfasi.

Sul lato pratico, non è necessario utilizzare nuovi tag per evidenziare. È possibile utilizzare emo itag, se si preferisce il corsivo come predefinita (non-CSS) il rendering e strongo bse si preferisce Bolding come predefinito. Se, per qualche motivo, preferisci il rendering predefinito come testo normale, cioè senza evidenziazione, usa span. In ogni caso, puoi utilizzare un classattributo per distinguere questo utilizzo dagli altri che potresti avere per il markup.

Le specifiche HTML e le bozze (HTML5) sono oscure per quanto riguarda la semantica di questi elementi, ma ciò non deve causare alcun forte mal di testa.

No, sebbene sia consentito aggiungere nuovi tag da un altro spazio dei nomi in XHTML, l'elaborazione di tag HTML non specificati è fortemente sconsigliata.

Bene, è legale in quanto non verrai arrestato per averlo fatto. Ma se gli assassini del W3C si presentano alla tua porta, non essere sorpreso.

Prima di tutto, altri sviluppatori non sapranno cosa significano. Nel caso di <important>e <highlight>lo sono, ma se usi qualcosa come, diciamo, <set>potresti sapere che ti stai riferendo a un set matematico, ma qualcun altro che legge il tuo codice potrebbe scambiarlo per qualcos'altro. Senza le specifiche lì per dare una risposta, potrebbe esserci molta confusione.

In secondo luogo, se il W3C decidesse che un <important>elemento è una buona idea, ma pensa che dovrebbe significare un avviso urgente, come

<important>This site is going to be down for maintenance 2/29/2012.</important>

Allora sei fregato. I browser e i tuoi colleghi sviluppatori saranno piuttosto confusi. Probabilmente ti costringeranno ad analizzare il tuo codice con regex fino a quando non diventerai pazzo. E sappiamo tutti come andrà a finire.

In terzo luogo, IE <9 non ti consente di modellare elementi sconosciuti senza un piccolo trucco. Non è una grande cosa, ma fastidioso.

Infine, in questo caso, <important>ed <highlight>esiste già! <strong>e <mark>sono quello che stai cercando. Secondo le specifiche HTML5

L'elemento forte rappresenta una forte importanza per i suoi contenuti.

e

L'elemento mark rappresenta una sequenza di testo in un documento contrassegnato o evidenziato a scopo di riferimento ...

Se non lo si utilizza per "scopi di riferimento", un <span>con una classe andrebbe bene.

http://www.w3.org/TR/html5/elements.html

Questa è la revisione 1.5612.

Gli autori non devono utilizzare elementi, attributi o valori di attributi non consentiti da questa specifica o da altre specifiche applicabili, in quanto ciò rende significativamente più difficile l'estensione della lingua in futuro.

Ignorando l'opinione altrui qui.

Non è una buona pratica per due motivi molto importanti:

Innanzitutto, è del tutto possibile che a un certo punto il comitato per le norme decida di includere un tag denominato <important>che finisce per comprometterne l'utilizzo. Certo, potrebbe volerci un po '.. Ma è possibile che perderai tempo a strapparlo in seguito.

Secondo, (questa è la vera ragione) il programmatore che eredita il tuo codice o dirà costantemente "wtf" al tuo approccio non standard mentre lo strappa fuori, o, ugualmente possibile, essere completamente confuso da ciò che sei tu Ho finito e semplicemente abbandonato la frustrazione.

Quindi sii gentile. Non si sa mai, un giorno potresti finire per chiedere a uno di loro un lavoro.

No, non puoi creare i tuoi tag HTML, perché dovresti quindi implementare tutti i principali browser per implementarli, attualmente quando i browser trovano un tag non riconosciuto, ignorano tutto ciò che contiene, quindi a meno che tu non voglia creare il tuo browser creando un nuovo il tag è inutile e anche allora funzionerebbero solo nel tuo browser.

Potresti provare a inviare un caso d'uso per loro al w3c, ma dubito che sarebbe arrivato ovunque.

No, non è una buona pratica per tutti i motivi forniti da tutte le altre risposte. Invece di ribadire quei punti, vorrei presentare un'opzione che non ho visto in quelle risposte!

Nel caso in cui non esistano tag il cui significato semantico corrisponde ai tuoi obiettivi, puoi utilizzare una combinazione di CSS e il nuovo data-*attributo nelle specifiche HTML 5. Ovviamente, questo funzionerà con quasi tutti i tag che scegli.

Esempio:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Sebbene questa non sia una soluzione perfetta, dal momento che non esiste un significato semantico ben definito per gli data-*attributi, ciò consentirebbe almeno di fornire informazioni aggiuntive a coloro che conoscevano il significato del proprio data-typeattributo.