Oggi propongo 12 regole che dovrebbero essere le linee guida di chi sta per scrivere una pagina web. Sono indicazioni decisamente utili e coprono gli ambiti della programmazione, dell’ottimizzazione del codice, della divisione tra contenuto e presentazione e della semantica del codice.
L’articolo è tratto da uno schema in inglese di CSS-Triks, che ho tradotto in italiano.
Eccole, una dopo l’altra:
- DOCTYPE dichiarato correttamente
Spesso è sottovalutato, ma il content type è molto importante. Non solo permette al codice di essere validato, ma consente ai browser di interpretare correttamente l’HTML. - Body con il proprio IDMettendo un ID sul tag BODY sarà possibile vincolare lo stile ad ogni singola pagina. Per esempio, se volete che l’H2 venga visualizzato in modo diverso nell’home page, potete scrivere: #home h2 {…}. Questo non comprometterà la visualizzazione di H2 nelle altre pagine.
- DIV principale per ogni paginaMettere tutto il contenuto della pagina in un div contenitore (wrapper), significa aver la possibilità di avere un maggior controllo sulla visualizzazione della pagina. E’ importante soprattutto quando si definisce la larghezza per siti a dimensione fissa, semifluida o fluida.
- Contenuto comune incluso
Gran parte di una pagina ha contenuti comuni con le altre. Pensiamo ai menu, alle sidebar, ai footer, ai box laterali, ecc…
Questo tipo di contenuto dovrebbe essere incluso dinamicamente, tramite inclusione di altri file o tramite database. - Chiusura dei tag
Bisogna finire i tag che si cominciano. Non essere superficiali non chiudendo i tag aperti è un grave errore, nonostante la visualizzazione si buona. - Contenuto, contenuto, contenutoIl contenuto della pagina è il motivo d’essere di un codice HTML. Ricordati di usare i paragrafi, punti elenco e le corrette entità HTML (è per indicare il carattere è).
Evita l’uso di <br/> per formattare la pagina - Corretta definizione dell’HEAD
Il titolo deve essere impostato. Il charset pure. I fogli di stile correttamente collegati (compresi quelli per la stampa). Script collegati e non scritti nel codice html. I file esterni devono essere inclusi nelle appropriate cartelle (p.e. CSS/, e script/). - Menu semanticamente corretto
- Contenuto principale, prima di tutto!
E’ importante che il contenuto principale della pagina, come il testo dell’articolo, il dettaglio della news, ecc, sia nella parte iniziale del codice HTML. Sidebar, menu di navigazione e footer devono comparire nell’HTML dopo. - Codice correttamente indentato
Se le parti del codice sono indentate, la struttura risulta molto più leggibile. Codice allineato a sinistra è orribile e di difficile lettura. - H1, h2, h3, ecc… nel corretto ordine
Usare i tag header (h1, h2, h3, ecc…), così come sono stati ideati, cioè per creare titoli per sezioni. E’ buona norma usarli nel corretto ordine, cioè prima l’h1, poi l’h2, e così via. - Nessuno stile nell’HTML
Il codice HTML dovrebbe trasportare contenuto e struttura e non lo stile. Mantieni lo stile nel CSS.
Evita quindi l’uso di tag <font>.
Scarica il poster (1600×1200 pixel, 300KB) per poterlo stampare e attaccare nel tuo ufficio!
