Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Un markup pronto per i fogli di stile

Buoni consigli da tenere a mente quando si sviluppa con HTML e CSS
Buoni consigli da tenere a mente quando si sviluppa con HTML e CSS
Link copiato negli appunti

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.

5. Classi e id con la semantica in mente

La scelta di nomi di classi e id è importante, dato che aggiunge informazione
sugli elementi di pagina e offre il punto di contatto principale per il foglio
di stile. C'è da tener presente però che nomi di classi e id non dovrebbero mai
indicare la presentazione di un elemento, ma il suo scopo o la sua funzione.

In tal senso cose del tipo div id="left" e div id="right"
per un layout a due colonne andrebbero evitati a favore di div id="content"
e div id="sidebar". Altro esempio: strong class="warning"
sarebbe da preferire a strong class="testorosso".

6. Evitare la classite

Vedremo ora due casi in cui l'uso delle classi è inappropriato o superfluo.
Il seguente codice:

<div id="header">
    <h1 class="titolo">Qui il titolo</h1>
</div>

si può migliorare per due motivi. Il primo è che l'uso della classe "titolo"
non ha senso, dato che h1 è già titolo senza doverlo precisare. Il secondo motivo
è che se l'uso della classe è per favorire la scrittura del foglio di stile, si può
pensare ad un'alternativa più leggera:

<div id="header">
    <h1>Qui il titolo</h1>
</div>

In questo caso basterà usare il selettore discendente nel foglio di stile.
La seguente regola viene specificata per l'h1 all'interno
del div id="header" e solo a quello:

div#header h1{
    font-size: 200%
    }

Allo stesso modo, usando il selettore discendente si può
pensare di trasformare il seguente codice eliminando la classe "link":

<div id="menu">
<ul>
    <li><a class="link" href="#">Home</a></li>
    <li><a class="link" href="#">Prodotti</a></li>
    <li><a class="link" href="#">Servizi</a></li>
    <li><a class="link" href="#">Contatti</a></li>
</ul>
</div>

7. Quando il markup minimale non basta

L'uso di elementi e contenitori aggiuntivi nel markup potrebbe risultare in contraddizione
con quanto detto finora. Ma ci sono alcuni casi in cui a parer mio è accettabile, ovvero:

  • quando sono necessari per evitare hack o workaround
  • per estendere la compatibilità sui browser
  • per necessità di impaginazione o di grafica
  • quando si va a migliorare o ripristinare l'accessibilità ai contenuti
    (per esempio l'image replacement)

In alcuni casi sarà difficile trovare un nome di attributo semantico per classi e id,
ma è importante provarci. In ogni caso è importante a parer mio tenere il numero di elementi
aggiuntivi nel markup al minimo, e se possibile usare contenitori aggiuntivi piuttosto che
elementi vuoti. E tener presente che il contenuto, il suo ordine naturale, i fondamenti
e la struttura del markup non andrebbero mai compromessi.


Ti consigliamo anche