I CONTENUTI E LA STRUTTURA/GRAFICA
Separare la grafica dai contenuti equivale a tenere da una parte la struttura di base della pagina (HTML ed elementi multimediali che si ripetono in tutto il sito) e dall'altra i testi e le immagini di cui si sta trattando nel documento stesso. Per questioni di chiarezza vediamo un esempio, ammettiamo di voler effettuare questa separazione in una pagina contenente un articolo sulla moda:

• I contenuti risulterebbero: il testo dell'articolo di moda (con grassetti, sottolineature e corsivi), il titolo, il sottotitolo, i titoletti, la data, l'autore, le immagini delle modelle di riferimento; in una parola tutto ciò che non si ripete in altre pagine simili.
  
  
• La grafica/struttura invece: gli elementi e attributi superflui dell'HTML (escluse quindi le tag relative alla formattazione di base, ad esempio la tag "<strong>"), il logo del sito, i link di navigazione (es. un pulsante indietro), le immagini di riempimento o di sfondo; in una parola tutto ciò che si ripete in altre pagine simili.

Alcuni effettuano una suddivisione in tre parti (ovvero grafica, contenuti e loro organizzazione) ma per questo tutorial non è necessario andare a complicare la disquisizione in questo senso.

VANTAGGI E SVANTAGGI
Vediamo i vantaggi:

1. Minori errori nella riproduzione della grafica/struttura su più pagine e quindi maggiore uniformità.
2. Riorganizzare o aggiornare la grafica/struttura di un sito anche di grandi dimensioni diverrà un processo molto più semplice e veloce.
3. In caso di eventuali elaborazioni di massa delle pagine di un sito (traduzioni, conversioni o correzioni), avere a disposizione del testo senza troppi attributi o elementi velocizza il processo e lo rende meno tortuoso.

Ed ecco invece gli svantaggi:

1. Minore possibilità di "spaziare" con la fantasia diversificando le strutture delle pagine (anche se purtroppo il web si muove verso la standardizzazione).
2. In presenza di designer che prediligono editor visuali, minore controllo immediato del risultato finale.

CONSIDERAZIONI FINALI E METODOLOGIE DI SEPARAZIONE
Per completezza elenchiamo alcuni tra i più diffusi metodi di separazione grafica/contenuto:

1. Stili CSS che gestiscono integralmente la grafica associati a file HTML (o XHTML) con ID e CLASS senza elementi e/o attributi.

2. Contenuti salvati in file XML, grafica in CSS e presentazione finale ottenuta tramite creazione di file HTML.

3. Struttura dinamica tramite scripting lato client (es. JavaScript) o lato server (es. ASP, PHP, ecc.), grafica in CSS, e contenuti inclusi recuperati da database o file XML.

4. Strutture multimediali avanzate (es. Flash, Java, ecc.) e contenuti importati interni a database o file XML.

In conclusione diciamo che: un sito caratterizzato da quattro/cinque pagine in realtà non necessita in maniera indispensabile di queste tecniche organizzative ma se ci si trova ad avere un qualcosa che risulta ad esempio in crescita, che mira ad espandersi o addirittura qualcosa di già grande allora è davvero meglio proiettarsi verso questo genere di soluzione (effettuare una conversione con un sito anche solo di trenta pagine può risultare lungo e macchinoso).