Gli Elementi HTML custom o personalizzabili sono quei tag ed attributi HTML che lo sviluppatore letteralmente inventa da sè, in quanto – mutuando una definizione dal diritto – atipici o innominati per la sintassi ufficiale, la quale infatti li disciplina solo in parte (come nel caso dell’attributo data-*
), o non li disciplina affatto.
Cionondimeno, analogamente a quanto avviene in ambito giuridico (art. 1322 c.c.), tali Elementi atipici possono essere (efficacemente) utilizzati in autonomia, non solo a fini HTML (cioè per la struttura e la semantica della pagina web), ma anche per altri scopi (meritevoli di tutela, ça va sans dire), come ad esempio in ambito CSS o JavaScript/jQuery, ove si comportano come se fossero tag ed attributi tipici o nominati, cioè normali: i web browser, infatti, sono compatibili con nuovi Elementi HTML, quindi potenzialmente sconosciuti, che trattano come se fossero generici tag HTML di tipo inline, assimilabili pertanto agli <span>
.
<fake>Questo è un tag finto: è comunque evidenziato in giallo (CSS) e puoi comunque cliccarci sopra (jQuery).</fake> <p fake="true">Questo paragrafo contiene un attributo finto: è comunque evidenziato in giallo (CSS) e puoi comunque cliccarci sopra (jQuery).</p> <style> fake { background-color:yellow; } [fake] { background-color:yellow; } </style> <script> $("fake").click(function(){ alert("Hai appena cliccato su un Elemento HTML finto! (tag 'fake')"); }); $("[fake]").click(function(){ alert("Hai appena cliccato su un Elemento HTML con un attributo finto! (tag 'p' con attributo 'fake')"); }); </script> <fake>Questo e' un tag finto: e' comunque evidenziato in giallo (CSS) e puoi comunque cliccarci sopra (jQuery).</fake> <p fake="true">Questo paragrafo contiene un attributo finto: e' comunque evidenziato in giallo (CSS) e puoi comunque cliccarci sopra (jQuery).</p>
Risultato:
Oltre agli immaginabili vantaggi di una tale libertà di personalizzazione (si pensi, ad esempio, alla possibilità di utilizzare un fantasioso tag HTML <ninja>
, al posto di un più prolisso e meno significativo tag HTML <div class="mimetico">
), devono altresì considerarsi le possibili controindicazioni che la personalizzazione stessa potrebbe comportare, ad esempio: eventuali problemi di rendering da parte dei web browser più datati; possibili conflitti con gli standard futuri (si pensi alla successiva tipizzazione di un tag HTML con caratteristiche affatto diverse da quelle già attribuite dallo sviluppatore al proprio tag custom); eventuali difficoltà in termini di usabilità da parte di utenti con handicap; possibili equivoci da parte di sviluppatori successivi, diversi da chi ha scritto il codice personalizzato (specie in mancanza di idonei commenti al codice stesso); possibili conseguenze negative in termini di SEO.
0 Comment