on Web 2.0

Regole per scrivere un buon codice HTML

regole per un buon htmlOggi 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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. 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/).
  8. Menu semanticamente corretto
  9. 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.
  10. 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.
  11. 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.
  12. 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>.

Regole per scrivere una pagina html

Scarica il poster (1600×1200 pixel, 300KB) per poterlo stampare e attaccare nel tuo ufficio!

scrivi un commento

Commento

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

  1. Complimenti per quest’articolo! L’ho inserito tra i miei segnalibri su Delicious, perché penso che mi tornerà utile. Sviluppo siti in ASP.NET per lavoro e sono convinto che io debba decisamente migliorare riguardo alla parte di markup delle pagine… 😉

Webmention

  • Paolo Gatti’s web corner Novembre 5, 2007

    I migliori 100 strumenti open source e gratuiti per lo sviluppo web (via Geekissimo) Disponibile il codice sorgente di Darwin 9 (via Mela Blog) PC Decrapifier, come eliminare tutti i programmi inutili preinstallati nei nuovi PC (via Geekissimo)Regole per scrivere un buon codice HTML(via Dynamick) Pixer: una piccola freeware tutta made in Italy (via Mela Blog) Pixer è una piccola utility freeware pensata per ridimensionare in batch un gruppo di immagini o una cartella di immagini tramite alcune variabili parametrizzate. Ad