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.

Guida WordPress 2.7: come personalizzare i post

Con la nuova versione di Wordpress è possibile personalizzare i post con facilità: ecco come modificare il codice del proprio template.

La versione 2.7 di WordPress è arrivata: la nuova interfaccia di amministrazione fa parlare di sè, ma ci sono altri cambiamenti che possono aiutare gli sviluppatori a personalizzare i temi, senza più bisogno di hack e plugin esterni.

Una delle novità più interessanti riguarda la personalizzazione dei post. Adesso infatti è presente una nuova funzione chiamata post_class() che assegna automaticamente a tutti i post contenuti nel loop alcune classi HTML. Queste classi possono essere utilizzate nel CSS, per modificare l’aspetto delle pagine e degli articoli.

La funzione post_class()

Per sfruttare la nuova funzione è sufficiente individuare nel template il blocco di codice HTML relativo ad ogni post, che si apre con:

<div class="post" id="post-<?php the_ID(); ?>">

A questo punto sostituitelo con:

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">

La nuova funzione genera automaticamente la classe post e ne crea di nuove, contenenti tra l’altro informazioni su categorie e tag. Se avete bisogno di aggiungere una classe a quelle di WordPress, vi basta specificarla con la funzione:

<?php post_class('nome-classe'); ?>

o se avete bisogno di più classi:

<?php post_class('classe1 classe2 altra-classe'); ?>

Infine se volete utilizzare la funzione all’esterno del loop o nelle pagine dei singoli post, potete farlo passando come secondo parametro l’ID del post:

<?php post_class('', $post_id); ?>

Come risultato finale avrete numerose classi a disposizione con cui personalizzare i vostri temi. Questo è l’elenco nel dettaglio:

  • .post: classe generica, applicata a tutti gli articoli
  • .sticky: classe assegnata ai post in evidenza, che con WordPress 2.7 possono essere visualizzati prima di tutti gli altri
  • .hentry: classe usata nei microformats
  • .category-nomecategoria: classe che indica la categoria di appartenenza del post, può essere più di una
  • .tag-nometag: classe che indica il tag di appartenenza del post, può essere più di una

Potete già immaginare le possibilità offerte da questa nuova funzione di WordPress 2.7. Niente che prima non si potesse fare con qualche hack, ma adesso è tutto pronto all’uso e collaudato, all’interno della piattaforma. Ora creare un post in evidenza con un aspetto diverso dagli altri è semplice, così come assegnare un’icona o uno sfondo differente ad ogni articolo, a seconda della categoria.

Nel prossimo post dedicato alla nuova versione di WordPress descriverò come personalizzare i commenti.

Guida all’utilizzo di ID e classi nel codice HTML

Consigli utili per ottimizzare il codice HTML, mantenendo separato il contenuto dalla presentazione.

Nello sviluppo di un sito spesso ci si preoccupa degli aspetti più complessi per poi dimenticare i dettagli elementari. All’interno del codice HTML hanno una notevole importanza ID e classi, ma capita di utilizzare questi attributi senza attenzione, in maniera spesso controproducente.

In ogni progetto è fondamentale considerare almeno due aspetti riguardanti il codice delle pagine:

  1. le possibilità di sviluppo future
  2. la leggibilità

Per ottenere i migliori risultati e soprattutto consentire a chiunque di comprendere il codice HTML, è sufficiente ricordarsi alcuni punti ben illustrati sul blog di Jens Meiert che ho voluto approfondire.

1. Ridurre al minimo ID e classi

Finchè è possibile, evitate di appesantire il codice HTML e sfruttate i selettori discendenti dei CSS. Sono uno strumento potente, e potrete così limitare gli ID ai contenitori principali (ad esempio #container, #header, #nav…). Potrebbe sembrare un dettaglio di poco conto, ma con la pratica vi accorgerete che questa non è un’indicazione assurda, anzi.

Ovviamente su elementi che hanno bisogno di personalizzazioni su misura (ad esempio un’icona associata) è indispensabile l’uso di classi ad hoc, ma questo modo di pensare sarà molto utile anche in futuro con i selettori dei CSS3. Sarete già pronti ad utilizzarli senza dover cambiare le vostre abitudini di lavoro.

2. Utilizzare nomi relativi alla funzione dell’elemento

Uno degli errori più comuni è usare per ID e classi un nome relativo all’aspetto dell’elemento e non alla sua funzione. Un esempio potrebbe essere .red_text invece di .alert. Commettendo questo errore resterete vincolati, ed in futuro non potrete cambiare la visualizzazione di quel particolare elemento senza modificare anche il nome dell’attributo. Avere una classe .red_text che fa riferimento ad un elemento di colore diverso dal rosso sarebbe assurdo!

A questo proposito non ci sono degli standard (anche se non sarebbe male averli), ma è buona pratica usare nomi come #menu o #nav per la navigazione, #content per il corpo centrale del sito, #header e #footer per testata e piede. Osservando i layout dei web designer più famosi potete farvi un’idea di quali siano le convenzioni più diffuse.

3. Sintetizzare in maniera comprensibile

Per velocizzare il lavoro ed evitare di avere fogli di stile esageratamente lunghi è sempre meglio cercare di usare nomi brevi per ID e classi. Questo però non deve andare a scapito della comprensibilità: #nav è sicuramente meglio di #navigation, ma usare .wdg al posto di .widget sarebbe esagerato.

Quelli mostrati sono dettagli elementari: proprio per questo andrebbero sempre tenuti presenti. Non pensate che siano aspetti poco importanti, la realizzazione di un buon sito inizia proprio dal codice scritto. A questo proposito, quali sono le vostre convenzioni per l’uso di ID e classi? Lasciate un commento per discuterne insieme.