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:
- footer
- menu
- title
- small
- text
- content
- header
- nav
- copyright
- button
- main
- search
- msonormal
- date
- smalltext
- body
- style1
- top
- white
- 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.
Quando sento di persone che ancora utilizzano Word per fare siti mi viene da star male, molto male.
Io temo che neanche tra 100 anni arriveremo ad avere siti validati, molte persone che masticano l’informatica non conoscono minimamente l’importanza della questione.
Ne approfitto per una domanda: il box degli articoli correlati è opera tua o di un plugin?
Ciao e complimenti per la grafica del sito, superba!
@Francesco: grazie per il commento. I post correlati sono generati da questo plugin, non è tra i più aggiornati ma per me è uno dei migliori.
Secondo me…il problema si risolve costringendo Microsoft a togliere quella funzione assurda da Word… :D
Apparte i scherzi, devo dire che non è cosi facile trovare nomi adatti ad ogni classe. Molto spesso mi ritrovo che per siti complessi realizzo CSS con decine e decine di classi, Tom dovrei rivedere il mio modo di scrivere codice? :)
@Stefano: c’è sempre qualcosa da rivedere e migliorare :)
Non tutti hanno le conoscenze per comprendere questi problemi.
Chi usa Word per fare un sito internet non ha assolutamente idea dei meccanismi che ci sono dietro ed è già un miracolo che riesce a pubblicare il proprio sito su un hosting gratuito. Tom
Il mio problema è che usando pochi ID e classi affidandomi quasi esclusivamente ai selettori discendenti, mi si riempirebbe il css di !important. Sintomo di cattivo design?
Mi sorge un dubbio… ma le classi non si dovrebbero usare al posto degli ID solo quando abbiamo da identificare più di un elemento per pagina con certe caratteristiche?!
Quindi, di footer e di header ce n’è solo uno per pagina…come fanno ad essere le classi piu usate? non dovrebbero essere gli ID piu usati?
(scusa l’ignoranza, ma essere autodidatti non è semplice XD)
@DnaX: non è detto, ognuno è libero di adottare la logica che preferisce, non è vietato usare !important nei CSS, anche se personalmente io di solito lo evito. A volte comunque basta un ID ben posizionato per risolvere questi problemi.
@Raspo: lo studio di Google riguarda solo le classi, header e footer a quanto pare vengono usate molto anche in questa forma, pur essendo elementi unici. Comunque hai ragione, sarebbe più logico usare degli ID.
Non sono pienamente d’accordo con quanto detto, secondo me la problematica va divisa, in primo luogo va tenuto conto che molte persone neofite creano le pagine web in maniera automatica con sofwtare gratuiti o in versione dimostrativa per cui io obbligherei le case produttrici di questi ultimi ad aggiornarsi e di fornire template validati e non pagine con tabelle come spesso vedo nei sofwtare rilasciati agli utenti. Altro discorso è invece se gli addetti ai lavori non creano siti accessibili e ce ne sono moltissimi che per non perdere tempo non adottano le ultime raccomandazioni di validazione. Comunque direi che sono stati fatti passi da gigante rispetto ad anni fa e che molti webmaster cercano di creare strutture accessibili e navigabili, impegnandosi ad imparare e mettere in pratica. Un plauso va sicuramente a loro….
Bella la storia di msonormal
praticamente ci sono siti web fatti con word…
che schifezza.
Molto interessante come articolo, dal mio canto che sono un programmatore, cerco sempre di utilizzare le classi e gli Id in maniera logica e corretta.
Io non sono programmatrice, ma queste informazioni mi usano per il SEO. Grazie!