Classi HTML: buone pratiche ed errori comuni

Google pubblica l’analisi di un miliardo di pagine web: le classi HTML più usate mostrano dati interessanti ed errori da evitare.

Esistono numerosi studi sulle pratiche più diffuse nel web design, ma spesso queste analisi vengono effettuate su un campione ristretto, non attendibile. Google ha pubblicato uno studio che fa luce su alcuni aspetti: pur non essendo troppo approfondito, può contare su un campione di più di un miliardo di pagine web. Abbastanza per fermarsi ad osservare i dati provando a trarne qualche conclusione.

Tra gli argomenti dello studio voglio considerare soprattutto le classi HTML, per capire anche quante speranze esistano di avvicinarsi alla nascita di un web semantico.

I risultati dello studio di Google sulle classi HTML

Prima di tutto, è necessario analizzare un aspetto: la maggior parte delle pagine web non utilizza alcuna classe. E’ un dato che potrebbe sorprendere, ma ricordate che stiamo parlando di una rete dove regnano ancora incontrastate le pagine con codice non valido, generate da software inefficaci, dove le tabelle vengono usate ancora per il layout.

La classifica delle classi più utilizzate è la seguente:

  1. footer
  2. menu
  3. title
  4. small
  5. text
  6. content
  7. header
  8. nav
  9. copyright
  10. button
  11. main
  12. search
  13. msonormal
  14. date
  15. smalltext
  16. body
  17. style1
  18. top
  19. white
  20. link

Alcune sono comuni, come header e footer, l’utilizzo di altre invece è totalmente errato.

Gli errori più comuni

Tra le classi di questa top 20, sono senza dubbio da evitare tutte quelle con un nome senza significato come msonormal o style1. Tra l’altro MsoNormal è una classe generata da Office esportando un documento come pagina web. Il fatto che sia presente tra le più utilizzate è indicativo della qualità media della rete e di come vengano realizzati molti siti: che sia un problema irrisolvibile?

Sono poi usate in maniera sbagliata le classi con un nome collegato all’aspetto presentazionale, come white.

Una guida da seguire

Se avete dubbi su come scrivere il codice HTML, utilizzando ID e classi nel modo corretto, trovate alcune indicazioni utili in un articolo che ho pubblicato qualche mese fa: “Guida all’utilizzo di ID e classi nel codice HTML”. L’argomento è sempre valido, per questo ci tengo a segnalarlo.

Il codice dovrebbe essere scritto sempre in maniera comprensibile, trovando il giusto equilibrio tra sintesi e leggibilità, senza dimenticare di usare nomi legati alla funzione di un elemento e non al suo aspetto.

Nel caso aveste delle aggiunte da segnalare o qualche suggerimento da farmi, lasciateli come sempre nei commenti e provvederò ad integrare la guida: il vostro contributo è sempre prezioso.