Attributi non standard sui tag HTML. Buona cosa? Brutta cosa? I vostri pensieri?

HTML (o forse solo XHTML?) È relativamente rigido quando si tratta di attributi non standard sui tag. Se non fanno parte delle specifiche, il tuo codice è considerato non conforme.

Tuttavia, gli attributi non standard possono essere abbastanza utili per trasmettere i metadati a Javascript. Ad esempio, se si suppone che un collegamento mostri un popup, è possibile impostare il nome del popup in un attributo:

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

In alternativa, puoi memorizzare il titolo del popup in un elemento nascosto, come uno span:

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

Sono tuttavia combattuto su quale dovrebbe essere un metodo preferito. Il primo metodo è più conciso e, immagino, non guasta tanto con i motori di ricerca e gli screen reader. Al contrario, la seconda opzione semplifica l'archiviazione di grandi quantità di dati ed è quindi più versatile. È anche conforme agli standard.

Sono curioso di sapere quali siano i pensieri di questa comunità. Come gestisci una situazione come questa? La semplicità del primo metodo supera i potenziali svantaggi (se ce ne sono)?

Sono un grande fan della soluzione HTML 5 proposta ( data-attributi prefissati). Modifica: aggiungerei che probabilmente ci sono esempi migliori per l'uso di attributi personalizzati. Ad esempio, i dati che verranno utilizzati da un'applicazione personalizzata che non hanno analoghi negli attributi standard (es. Personalizzazione per gestori di eventi basata su qualcosa che non può essere necessariamente espresso in un className o id).

Gli attributi personalizzati forniscono un modo conveniente per trasferire dati aggiuntivi sul lato client. Dojo Toolkit lo fa regolarmente ed è stato sottolineato ( Debunking Dojo Toolkit Myths ) che:

Gli attributi personalizzati sono sempre stati HTML validi, semplicemente non vengono convalidati quando vengono testati con un DTD. [...] La specifica HTML afferma che qualsiasi attributo non riconosciuto deve essere ignorato dal motore di rendering HTML nei programmi utente, e Dojo opzionalmente ne approfitta per migliorare la facilità di sviluppo.

Un'altra opzione sarebbe definire qualcosa di simile in Javascript:

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

Quindi puoi usarlo più tardi nel tuo codice Javascript, assumendo che il tuo link abbia un ID che corrisponde all'ID in questa tabella hash.

Non ha gli svantaggi degli altri due metodi: nessun attributo non standard né il brutto intervallo nascosto.

Lo svantaggio è che potrebbe essere un po 'eccessivo per cose semplici come il tuo esempio. Ma per scenari più complessi, in cui hai più dati da trasmettere, è una buona scelta. Soprattutto considerando che i dati vengono passati come JSON, quindi puoi passare facilmente oggetti complessi.

Inoltre, mantieni i dati separati dalla formattazione, il che è positivo per la manutenibilità.

Puoi anche avere qualcosa di simile (che non puoi davvero fare con gli altri metodi):

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

E poiché molto probabilmente usi un linguaggio di programmazione lato server, questa tabella hash dovrebbe essere banale da generare dinamicamente (basta serializzarla in JSON e sputarla nella sezione di intestazione della pagina).

Ebbene, in questo caso, la soluzione ottimale è

<a href="#" alt="" title="Title of My Pop-up">click</a>

e utilizzando l'attributo title.

A volte rompo le specifiche se ne ho davvero bisogno. Ma raramente, e solo per una buona ragione.

EDIT: Non sono sicuro del perché -1, ma stavo sottolineando che a volte pensi di dover rompere le specifiche, quando non lo fai.

Perché non dichiarare l'attributo popup_title in una DTD personalizzata? Questo risolve il problema con la convalida. Lo faccio con tutti gli elementi, attributi e valori non standard e grazie a questa convalida mi mostra solo problemi reali con il mio codice. Ciò rende anche meno possibile qualsiasi errore del browser con tale HTML.

È possibile annidare elementi di input nascosti ALL'INTERNO dell'elemento di ancoraggio

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

Quindi puoi facilmente estrarre i dati da

$('#anchor_id .articleid').val()

La mia soluzione alla fine è stata quella di nascondere dati aggiuntivi nel tag id separati da una sorta di delimitatore (un trattino basso è uno spazio, due è la fine di quell'argomento), il secondo arg c'è un id:

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

Brutto, e presume che tu non stia già utilizzando il tag ID per qualcos'altro, ma è conforme a tutti i browser.

La mia sensazione personale nel tuo esempio è che il percorso span è più appropriato, poiché soddisfa gli standard della specifica XHTML. Tuttavia, posso vedere un argomento per attributi personalizzati, ma penso che aggiungano un livello di confusione che non è necessario.

Mi sono arrovellato anche su questo. Mi piace la leggibilità degli attributi non standard, ma non mi piace che infranga lo standard. L'esempio di span nascosto è conforme, ma non è molto leggibile. Che dire di questo:

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

Qui il codice è molto leggibile, grazie alla notazione della coppia chiave / valore di JSON. Puoi dire che si tratta di metadati che appartengono al link semplicemente guardandoli. L'unico difetto che posso vedere oltre al dirottamento dell'attributo "rel" è che questo diventerebbe disordinato per oggetti complessi. Mi piace molto l'idea degli attributi con prefisso "dati" menzionata sopra. I browser attuali lo supportano?

Ecco qualcos'altro a cui pensare. Quanto impatto ha un codice non conforme sulla SEO?