CSS  »  Articoli  »  Accessibilità e CSS 

La scrittura di un buon codice HTML è il fondamento dell'intera codifica di un sito web e classi e ID sono tra i punti di contatto principali per la personalizzione con i fogli di stile.

Vedremo in questo appuntamento alcuni consigli per scrivere un buon markup pensato per la personalizzazione con i fogli di stile ma soprattutto basato sui contenuti, attraverso alcuni consigli pratici. Questo articolo è il proseguimento ideale di Scrivere codice HTML semantico. Cominciamo subito.

1. I contenuti prima di tutto: veicolare l'informazione senza CSS

Una delle cose fondamentali da tener presente nello sviluppo web è che tutto inizia dal contenuto, poi segue la struttura e infine la presentazione. Un buon markup deve servire anzitutto i contenuti prima della presentazione.

Il processo di sviluppo di una pagina o sito web è molto soggettivo, ma è importante prima di procedere con i fogli di stile consultare la pagina realizzata: in maniera molto simile verrà visualizzata su un browser testuale e altri dispositivi alternativi.

2. Scrivere markup semantico: usare l'elemento giusto al momento giusto

La logica è semplice: l'HTML ci offre moltissimi elementi, ciascuno con uno scopo. Conoscerli a fondo ci aiuta a strutturare al meglio i contenuti.

Come abbiamo detto beneficia di un buon markup semantico una fascia più ampia di utenza, ma non solo: anche i motori di ricerca lo preferiscono.

3. Ok per i div, un po' meno per gli span

Div e span sono gli elementi neutri per eccellenza, rispettivamente block-level e inline. L'uso dei div è spesso indispensabile per contenere le sezioni principali di una pagina e racchiudere elementi logicamente correlati laddove non vi sia un'alternativa semantica.

Gli span al contrario non hanno uno scopo generico, e il più delle volte vengono usati per servire la presentazione o, erroneamente, per sostituire elementi appropriati. Ad esempio, girovagando in rete e curiosando tra il codice, mi è capitato diverse volte di vedere code del tipo span class="label" oppure span class="grassetto": scelte simili sono da evitare in favore degli elementi label e strong.

4. Capire classi e id

Capire a fondo la differenza tra id e classi è fondamentale per scrivere un buon markup. Gli id individuano univocamente elementi e/o sezioni di pagina, mentre le classi hanno la capacità di definire gruppi (classi appunto) di elementi che hanno stessa funzionalità o scopo.

Mentre l'uso degli id è indispensabile, quantomeno per le varie sezioni di pagina (header, navigazione, contenuto e footer), l'uso delle classi andrebbe limitato. Soprattutto durante i primi passi di sviluppo con HTML e fogli di stile, c'è la tendenza naturale ad abbondare con l'uso delle classi. Non sono nocive e a volte sono indispensabili, ma andrebbero tenute al minimo: soprattutto nei casi in cui si potrebbe usare un unico id oppure avvantaggiarsi del selettore discendente.

Altri articoli

Altre guide

Altre newsletter