Questo post è una traduzione autorizzata dall’autore, Roger Johansson, dell’articolo Bring on the tables, in cui si parla di come rendere l’utilizzo delle tabelle accessibile e corretto.
Secondo l’autore, bisogna evitare il più possibile l’utilizzo delle tabelle per elementi di layout, ma per mostrare dei dati tabulari, cioè informazioni presentate logicamente in righe e colonne, le tabelle sono lo strumento adatto!. Le tabelle mettono a disposizione molti più tag rispetto ai canonici td e tr, specialmente se si vuole rendere il contenuto più accesibile (e semantico!).

Ecco, per prima cosa, un po’ di informazioni generali.
L’affermazione "evitare l’uso di tabelle per il layout" si trova in "Introduzione alle tabelle" nelle specifiche HTML 4.01:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

”

Direi che il testo è abbastanza chiaro, anche se la parola usata è "should", non "must": le specifiche tecniche consentono una certa flessibilità.

Ma questo articolo non vuole parlare della questione se utilizzare le tabelle per il layout o no. Tratta dell’utilizzo delle tabelle per la loro funzione originaria: la marcatura di dati tabulari.

Quando le tabelle vengono utilizzate per contrassegnare i dati effettivi, non sono solo una griglia per il layout. Le persone senza problemi di vista possono farsi un’idea del rapporto che c’è tra l’intestazione e le celle di dati osservando il layout e la presentazione visiva della tabella. Al contrario, le persone non vedenti o ipovedenti non possono farlo. Affinchè una tabella sia accessibile a persone che usano uno screen reader o qualche altro user-agent non-visivo, bisogna comunicare all’user-agent che rapporto hanno tra loro le informazioni che essa contiene.

Fortunatamente, l’HTML fornisce in abbondanza elementi e attributi per questo scopo. Meno fortunatamente, può essere piuttosto difficile capire come usare alcune di queste caratteristiche di accessibilità. In questo articolo cercherò di spiegare come utilizzarne la maggior parte.

Intestazione della tabella: il tag th

Cominciamo con una tabella molto semplice, che ha solo una singola riga di intestazioni, ognuna delle quali definisce i dati in una colonna.
Ecco come appare il codice contrassegnato alla vecchia maniera, con solo le righe e le celle:

<table>
  <tr>
    <td>Compagnia</td>
    <td>Dipendenti</td>
    <td>Fondazione</td>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Senza bordi o stili, nella maggior parte dei browser la tabella sarà più o meno così:

Per una persona senza problemi di vista, è facile e veloce fare il collegamento tra le intestazioni e le celle di dati che esse descrivono. Chi utilizza uno screen reader, d’altra parte, avrebbe sentito qualcosa del tipo "Compagnia Dipendenti ACME Fondata Inc 1000 1947 2000 1073 XYZ Corp". Non è molto facile trovare un senso in queste parole!!!

Il primo – e più semplice – passo per rendere più accessibile questa tabella, è quello di marcare le intestazioni in modo corretto.
E’ molto facile: basta utilizzare l’elemento th (Table Header: Intestazione di Tabella) invece di td (Table Data: Dati tabellari) per le celle di intestazione:

<table>
  <tr>
    <th>Compagnia</th>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Per questa semplice tabella, aver inserito le intestazioni è sufficiente per permettere a uno screen reader di informare l’utente su quale cella di intestazione dei dati è legata a quale cella. Un lettore di schermo potrebbe dire "Azienda: ACME Inc. dipendenti: 1000. Fondazione: 1947", e così via per ogni riga. Molto meglio, no?

Inserire le didascalie: caption

L’elemento caption può essere utilizzato per fornire una breve descrizione della tabella, in modo molto simile a alla funzione che ha una didascalia per l’immagine.
Come impostazione predefinita, la maggior parte dei browser rendono il caption in posizione centrata sopra la tabella.
La proprietà CSS caption-side può essere utilizzata per modificarlo, se necessario. La maggior parte dei browser visualizzerà la didascalia al di sopra (top) o sotto (bottom) il contenuto della tabella, mentre alcuni accettano anche i valori sinistra o destra. Vi lascio sperimentare!

Quando viene utilizzato, il caption deve comparire per primo subito dopo l’apertura del tag table, per esempio, così:

<table>
  <caption>Tabella 1: dati della Compagnia</caption>
  <tr>
    <th>Compagnia</th>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

È possibile utilizzare i CSS per lo stile della didascalia, se lo si desidera. Tuttavia, bisogna essere consapevoli del fatto che potrebbe essere necessario usare alcuni trick per mantenere la coerenza di layout su tutti i browser. Vi lascio esercitare anche su questo!

L’attributo summary: come spiegare il contenuto della tabella!

Una persona vedente può facilmente decidere se studiare una tabella in dettaglio. Un rapido sguardo ci dirà quanto è grande la tabella, e più o meno ciò che contiene.
Una persona che utilizza uno screen reader invece non può farlo, a meno che il webdesigner non aggiunga alla tabella un attributo che sintetizzi il contenuto. In questo modo è possibile fornire una descrizione più dettagliata della tabella rispetto a quanto faccia l’elemento caption.

Il contenuto dell’attributo summary non viene reso visibile dai browser visuali: in questo modo è possibile scrivere una descrizione abbastanza lunga, per fare in modo che chi ascolta capisca a pieno di cosa parla la tabella. Non bisogna però esagerare: utilizziamo l’attributo di sintesi solo quando è necessario, cioè per più tabelle complesse, per cui una sintesi sarà più facile, per chi utilizza un lettore di schermo, comprendere il contenuto della tabella. Ecco la tabella di prima con il tag summary:

<table summary="Il numero di dipendenti e l'anno di
 fondazione di alcune compagnie immaginarie.">
  <caption>Tabella 1: dati della Compagnia</caption>
  <tr>
    <th>Compagnia</th>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Come accorciare le intestazioni? Con l’attributo abbr!

Quando uno screen reader incontra una tabella, può annunciare l’intestazione associata (o header) prima di ogni cella di dati.
Se la tabella dispone di intestazioni lunghe però, sentendole ripetere più e più volte, può risultare noioso per chi ascolta. Utilizzando l’attributo abbr per fornire una versione abbreviata di eventuali intestazioni lunghe, potete dare agli screen reader qualcosa che possono utilizzare al posto del testo nella stessa intestazione. L’uso dell’attributo abbr è opzionale, e la maggior parte delle volte gli header saranno (o meglio, dovrebbero essere!) comunque piuttosto brevi.

La tabella di esempio è stata leggermente modificata, per rendere le intestazioni più lunghe. Vediamo come viene utilizzato l’attributo abbr:

<table summary="Il numero di dipendenti e l'anno di
 fondazione di alcune compagnie immaginarie.">
<caption>Table 1: Compagnia data</caption>
  <tr>
    <th abbr="Compagnia">Compagnia Name</th>
    <th abbr="Impiegati">Numero di Impiegati</th>
    <th abbr="Fondazione">Anno di fondazione</th>
  </tr>
  <tr>
    <td>ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td>XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

Uno screen reader leggerà quindi leggere le intestazioni (con la descrizione lunga) per la prima riga dei dati, per poi utilizzare l’abbreviazione per le righe rimanenti.

Considerando quanto difficile possa essere l’inserimento di tabelle nei layout web, direi che è più comune l’esigenza contraria: per rendere le intestazioni più brevi possibile, o anche abbreviate, è meglio utilizzare l’attributo title o l’elemento abbr per fornire una spiegazione più lunga.

Come collegare le intestazioni con i dati?
Con gli attributi scope, ID e headers

Molte tabelle sono più complesse rispetto alla tabella di esempio che abbiamo visto finora. La renderemo un po’ più complessa, eliminando l’intestazione "Compagnia" e modificando le celle di dati nella prima colonna, e nelle celle dell’intestazione

<table summary="Il numero di dipendenti e l'anno di
 fondazione di alcune compagnie immaginarie.">
  <caption>
  Table 1: Compagnia data
  </caption>
  <tr>
    <td></td>
    <th>Dipendenti</th>
    <th>Fondazione</th>
  </tr>
  <tr>
    <th>ACME Inc</th>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <th>XYZ Corp</th>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

In questa tabella, ogni cella di dati ha due intestazioni. Il metodo più semplice, cioè per un markup più "saggio", per fare in modo che un browser non-visivo possa dare un senso a questa tabella, è quello di aggiungere un attributo scope a tutte le celle di intestazione:

<table summary="Il numero di dipendenti e l'anno di
fondazione di alcune compagnie immaginarie.">
  <caption>
  Table 1: Compagnia data
  </caption>
  <tr>
    <td></td>
    <th scope="col">Dipendenti</th>
    <th scope="col">Fondazione</th>
  </tr>
  <tr>
    <th scope="row">ACME Inc</th>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <th scope="row">XYZ Corp</th>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

L’attributo scope definisce se una cella di intestazione fornisce informazioni di intestazione per una colonna o una riga:

• col: informazioni di intestazione per la colonna in cui si trova
• row: informazioni di intestazione per la riga in cui si trova

L’aggiunta di un attributo scope con il valore col alle intestazioni nella prima riga dichiara che sono le intestazioni per le celle di dati sotto di esse.
Allo stessa maniera, dando uno scope con valore row alle intestazioni che iniziano ogni riga, le rendiamo intestazioni per tutte le celle di dati che si trovano alla loro destra.

L’attributo scope può assumere altri due valori:

• colgroup: informazioni di intestazione per il resto del gruppo di colonne che la contiene
• rowgroup: informazioni di intestazione per il resto del gruppo di righe che la contiene

Un gruppo di colonne è definito dall’ elemento colgroup. Ragruppamenti di rige sono definiti dagli elementi thead , tfoot e tbody.
Ma di quest’ultimi torneremo a parlare tra poco.

Che cosa succede se si desidera: sia mantenere l’intestazione "Compagnia", e che i nomi delle società siano le intestazioni di riga?
Ciò farebbe sì che le celle che contengono i nomi delle società debbano fornire sia le informazioni di intestazione, sia i dati. In questo caso, td dovrebbe essere usato assieme all’attributo scope:

<table summary="Il numero di dipendenti e l'anno di
fondazione di alcune compagnie immaginarie.">
  <caption>
  Table 1: Compagnia data
  </caption>
  <tr>
    <th scope="col">Compagnia</th>
    <th scope="col">Dipendenti</th>
    <th scope="col">Fondazione</th>
  </tr>
  <tr>
    <td scope="row">ACME Inc</td>
    <td>1000</td>
    <td>1947</td>
  </tr>
  <tr>
    <td scope="row">XYZ Corp</td>
    <td>2000</td>
    <td>1973</td>
  </tr>
</table>

In questo modo, nei browser visuali non verranno visualizzati i nomi delle società come intestazioni di default, quindi è necessario un po’ di CSS per rimediare.
Per questo esempio, ho usato il seguente codice CSS:

td[scope] {
	font-weight:bold;
}

Si noti che questa regola utilizza un selettore di attributo, che Internet Explorer non supporta. Una soluzione sarebbe aggiungere una classe a qualsiasi celle di dati da stilare come intestazione.

Un’altra tecnica per collegare le celle di una tabella con l’intestazione cui fanno riferimento comporta il dover dare a ogni intestazione un ID univoco.
Va poi aggiunto ad ogni cella un attributo headers. Questo attributo contiene un elenco, separato da spazi, degli id di ogni cella di intestazione che si applica a quella cella di dati. Questa tecnica è più complicata, e deve essere utilizzata solo quando le celle di dati che devono essere collegate a più di due celle di intestazione e l’attributo scope è insufficiente, come può accadere in una tabella molto complessa o irregolare.

Per illustrare questo caso, ho cambiato la tabella in modo tale da mostrare, per ogni socità, il numero di dipendenti di ciascun sesso:

<table class="extbl" summary="Il numero di dipendenti e l'anno di
fondazione di alcune compagnie immaginarie.">
  <caption>
  Tabella 1: dati della Compagnia
  </caption>
  <tr>
    <td rowspan="2"></td>
    <th id="employees" colspan="2">Dipendenti</th>
    <th id="founded" rowspan="2">Fondazione</th>
  </tr>
  <tr>
    <th id="men">Uomini</th>
    <th id="women">Donne</th>
  </tr>
  <tr>
    <th id="acme">ACME Inc</th>
    <td headers="acme employees men">700</td>
    <td headers="acme employees women">300</td>
    <td headers="acme founded">1947</td>
  </tr>
  <tr>
    <th id="xyz">XYZ Corp</th>
    <td headers="xyz employees men">1200</td>
    <td headers="xyz employees women">800</td>
    <td headers="xyz founded">1973</td>
  </tr>
</table>

Come si può ben vedere, questo metodo diventa rapidamente molto complicato, quindi se è possibile, è meglio utilizzare l’attributo scope.

Raggruppare celle con rowspan e colspan

Nel vecchio approccio web (layout con tabelle), gli attributi rowspan e colspan erano spesso usati per unire le celle delle tabelle in diverse righe o colonne, al fine di metterci dentro, in fila una dopo l’altra, tutte le immagini ritagliate. Tali attributi sopravvivono ancora, dato che non vi è alcun modo per usare i CSS per specificare lo "spanning".
Se ci pensate bene, è abbastanza logico: le fusioni di righe e di colonne sono parte della struttura di una tabella, non sono la sua presentazione!

Colonne e gruppi di colonne: col e colgroup

L’HTML mette a disposizione gli elementi colgroup e col per raggruppare colonne correlate . Questo permette (in alcuni browser) l’uso di CSS per dare alle colonne dello stile in modo indipendente. Per fare gruppi di colonne, può essere utilizzato anche l’attributo scope, per specificare che una cella contiene informazioni di intestazione per il resto del gruppo di colonne che la contiene.

Questo è tutto ciò che diremo in questo articolo su colonne e gruppi di colonne.
Per informazioni più dettagliate, date un’occhiata ai collegamenti nella sezione "What I didn’t tell you" dell’articolo originale, oppure in fondo a questa pagina.

Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>

Le righe della tabella possono essere raggruppate in una sezione intestazione di tabella racchiusa nei tag thead, in una sezione piè pagina nel tag tfoot, e in uno o più sezioni corpo della tabella mediante il tag tbody. Ogni gruppo di righe deve contenere una o più righe di tabella.

Se una tabella contiene una sezione di testa thead, quest’ultima deve comparire prima del piè pagina e delle sezioni del corpo tabellare.
La sezione tfoot deve sempre comparire prima del (o dei) tag tbody.
Se nella tabella non è usata nè thead nè tfoot, l’elemento tbody non è richiesto (ma non vietato: potete aggiungerlo, se volete).

La struttura di una tabella che contiene i gruppi di righe appare così:

<table>
  <thead>
    <tr></tr>
  … altre righe per la table-head
  </thead>
  <tfoot>
    <tr></tr>
  … altre righe per la table-foot
  </tfoot>
  <tbody>
    <tr></tr>
  … altre righe per la table-body
  </tbody>
  <tbody>
    <tr></tr>
  … altre righe per la seconda table-body
  </tbody>
  … altre righe per le altre eventuali table-body
</table>

Raggruppare le righe è essere utile per diversi motivi:

1. Si può facilmente applicare lo stile al tfoot, thead, e alle sezioni tbody di una tabella in modo indipendente l’uno dall’altro, senza dover aggiungere classi.
2. Quando si stampano tabelle molto lunghe, alcuni browser (come quelli basati su Mozilla) ripeteranno le informazioni dell’intestazione e del piè pagina in ogni pagina stampata, rendendo più facile leggere la tabella stampata.
3. Separare l’intestazione e il piè pagina dal corpo vero e proprio permette anche ad alcuni browser di scorrere solo il corpo della tabella.

Solo per le tabelle di dati

Tutto quanto fin qui descritto riguarda l’uso di tabelle HTML per strutturare e presentare i dati. Se si utilizzano tabelle per il layout, nessuna delle tecniche qui descritte qui dovrebbero essere usate. Nessun attributo summary, nessuna intestazione, né caption, niente. Solo una semplice, tabella con layout vecchio stile, composta nientaltro che dai tag table, tr e td.
Altrimenti si rischia di confondere ancora di più gli utenti che utilizzano screen-reader.

I vantaggi

Può sembrare un sacco di lavoro per creare tabelle di dati accessibili in HTML. Per le tabelle complesse, lo è. A volte al punto in cui diventa quasi impossibile scriverle manualmente.
Per le tabelle semplici, però, utilizzare celle di intestazione con un attributo scope è veloce e facile.

E ‘ovvio che le persone che usano screen-reader o altra tecnologia assistiva, trovano beneficio dalle tabelle che utilizzano le funzioni di accessibilità disponibili. Cercare di dare un senso a un grande e complessa tabella per chi ascolta può ancora essere molto difficile, quindi, se possibile, cerchiamo di semplificare la tabella.

Meno è ovvio che traggono beneficio anche i progettisti e gli utilizzatori di browser grafici: una tabella accessibile è ricca di ganci strutturali da applicare ai CSS, e uno stile scritto bene può rendere la tavola più fruibile per tutti.

Quello che non vi ho detto

Ma ci sarebbe molto altro da dire sulle tabelle di dati che qui non ho citato. Per esempio, non ho menzionato per niente (fino ad ora) l’attributo axis, e non ho descriitto nel dettaglio gli elementi colgroup e col. Non ho nemmeno accennato alla formattazione e allo stile, o ai tipi di bordo. Inoltre, manca un esempio di una tabella estremamente complessa.

Per quelli di voi che cercano informazioni più dettagliate, ecco dei link ad alcuni ulteriori approfondimenti:

• Tables in HTML documents
• CSS formatting of tables
• Techniques for Accessible HTML Tables
• Building accessible websites: Tables and frames
• A table, s’il vous plaît

Articoli correlati:

1. Tag HTML: capire la differenza tra elementi block e inline

Il grafico tratteggia le principali novità e tutte le caratteristiche del nuovo standard, mettendo anche a confronto i maggiori browser per verificare quali tra essi sia già pronti per affrontare la rivoluzione.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!

La compatibilità con i browser sembra non essere più un grosso problema, da quando hanno iniziato a circolare risorse come Modernizr, ExplorerCanvas o IE7.js, per "modernizzare" i browser non compatibili con le nuove tecnologie, oppure per attivare i tag HTML5 su tutti i browser.

Dopo aver dato una occhiata alle maggiori novità di HTML5, e dopo aver dato uno sguardo alle tecniche per utilizzare già oggi i CSS3, ecco più di 10 template HTML5-CSS3 tutti da testare, con cui iniziare a progettare per il web di domani. Se li hai gà testati, dimmi cosa ne pensi nei commenti in fondo al post!

HTML5 Starter Pack

HTML5 Starter Kit è un template che non costringe a costruire un particolare tipo di sito web, ma si adatta a seconda delle esigenze.
Ecco le sue caratteristiche: gratuito, HTML5 cross-browser (compreso IE6), possibilità di utilizzare immediatamente Cufón @font-face, disponibilità di alcune classi strutturali riutilizzabili.
Infine, viene offerto il file .PSD per aggiornare il layout.

Gotta’ love HTML5 & CSS3

Template per le gallerie di immagini, sviluppato con HTML5-CSS3, che comprende:
transizioni animate (come l'hover animato per la descrizione delle immagini) e un’interfaccia a schede per diverse gallerie con CSS3 (che usa solo il selettore :target).

A Free HTML5 and CSS3 Theme

Il template permette di creare sotto-pagine funzionanti, tra cui un modulo di contatto con validazione lato server, e codice PHP per l’invio della posta elettronica.
Utilizza la griglia 960.gs, e ha un font personalizzato chiamato Chunkfive che fa uso di @font-face.

Coding A HTML 5 Layout From Scratch

Tutorial da Smashing Magazine: il template proposto è una vetrina per la maggior parte dei nuovi elementi di intestazione, piè di pagina, sezione, ecc.
Nelle strutture CSS3, c’è il popolare text-shadow e altri selettori come last-child o selection.

52framework

52framework è uno strumento completo per iniziare a progettare con HTML5 e CSS3 con l’uso dei nuovi tag, campi di input, angoli arrotondati, text-shadows, ecc…
Include un sistema di layout a griglia e un CSS-reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial molto dettagliato sulla creazione di una applicazione web per iPhone che utilizza HTML5 e CSS3.

Creare un sito elegante con HTML 5 e CSS3

Questo tutorial pemette di creare pagine web con HTML5 e CSS3, e di condividere il risultato sotto forma di download gratuito.
Molti nuovi elementi HTML5 vengono qui utilizzati e viene integrato Modernizr per la compatibilità di IE.

Free HTML5 Template

Template per layout HTML a 2 o 3 colonne, compreso il file .PSD per gli elementi di layout.

HTML5 & CSS3 Vertical One-Page Template

Un template per siti one-page a svluppo verticale, che utilizza jQuery per lo scorrimento del contenuto in verticale per la visualizzazione dei link.

OWMX 1 HTML5-CSS3 Template

Template per blog a 2 colonne che utilizza molte delle nuove caratteristiche CSS3 e dei tag HTML5.
Utilizza il microformato: hCalendar microformat.

FlipThru HTML5 and CSS3 Template

Il template è piuttosto semplice ma utilizza le maggiori funzionalità di HTML5-CSS3.
Tuttavia, è da notare la disponibilità di un accordion che fa solo uso di CSS3.

HTML5-CSS3 Starting Template

Questo template offre una struttura completa per siti web HTML5 costruiti con PHP.
Comprende inoltre gli stili CSS per il layout, per la tipografia, per la stampa e il CSS reset.
Sono già disponibili nel modello le funzioni include PHP per header, footer, ecc

Articoli correlati:

1. CSS3: compatibilità cross-browser…da oggi!
2. HTML5: tag nuovi e anteprima delle novità
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Server Side Include: cosa sono

I comandi Server Side Include sono dei semplici script utilizzati nelle pagine HTML e permettono di includere il contenuto (che può essere dinamico) di un documento in un altro, rendendo più facile la manutenzione del sito.
Il comando SSI "include" è probabilmente il comando più usato.
Il file o il parametro virtuale specifica il file (pagina HTML, file di testo, script, ecc.) da includere. Di solito, i server web non supportano SSI, tranne pochi, tra cui i Apache. Con Apache il file che include deve avere estensione shtml (cioèserver-parsed HTML, o Secure HTML), .shtm, o .stm, mentre il file che viene incluso può avere qualsiasi estensione. Se non viene attribuita al file che include un’estensione "shtml", l’inclusione non avviene. Solo i file con queste estensioni vengono infatti processati per trovare ed effettuare le direttive di inclusione. I files "html" e "htm" invece vengono "serviti" al client così come sono, senza essere processati, dal momento che Apache in questo modo sa a priori che non contengono inclusioni. Quando un file SSI viene analizzato (parsing) nel server, il server prende l’intero contenuto del file e lo inserisce nella pagina, sostituendo il codice incluso:

<!--#include file="mioFile.html" -->  

Come aggiungere il supporto SSI in Wamp

Ecco come procedere:

1. Cercare la cartella C:\wamp\bin\apache\Apache2.2.11\conf
2. Aprire il file http.conf
3. Cercare

   <IfModule mime_module>...</IfModule>

   e aggiungervi il seguente codice:

   AddType text/html .shtml
Options +Includes
AddOutputFilter INCLUDES .shtml

4. poi trovare Options Indexes FollowSymLinks e sostituirlo con:

   Options +Indexes +FollowSymLinks +Includes

5. Riavviare tutti i servizi.

Articoli correlati:

1. SEO e HTTP status code

L’introduzione dei CSS3 permetterà di realizzare siti web più flessibili e di ridurre i costi di sviluppo e di manutenzione. Per utilizzare già adesso la maggior parte delle proprietà CSS3, dobbiamo usare le specifiche estensioni del browser assieme alle proprietà originali. Le estensioni più comuni sono quelle usate per i browser basati su WebKit (per esempio, Safari), che iniziano con -WebKit, e browser basati su Gecko (per esempio, Firefox), che si aprono con -moz-. Konqueror (-KHTML-), Opera (-o) e Internet Explorer (-ms-) hanno le loro estensioni proprietarie. Come designer professionisti, dobbiamo tenere a mente che l’utilizzo di queste proprietà specifiche non permettere di validare i fogli di stile. Ma in alcuni casi, per sperimentare o per apprendimento, possiamo affiancarla alle proprità CSS validate.

Ma esattamente quali tecniche CSS3 possiamo già usare oggi?

Ecco di seguito le principali novità CSS3 e la compatibilità con i maggiori browser, da testare con i file di esempio.

CSS3: angoli arrotondati

Ecco il codice, utilizzato per realizzare i bordi arrotondati:

.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
     border-radius: 12px; /* Opera 10.5, IE 9 */
	}

• Firefox 1+
• Safari3+
• Chrome
• Opera 10.5
• IE 9

Una valida soluzione alternativa, realmente cross-browser (compreso IE6+), basata su JavaScript, è rappresentata da jQuery Corner. Update! Ecco come risolvere il bug dei bordi arrotondati su immagini di sfondo.

CSS3: ombra esterna

Le nuove dichiarazioni CSS3 permettono di proiettare ombra esterna da un oggetto. Per tutti i browser, tranne IE6-7-8, dopo la dichiarazione della proprietà, il primo valore consente di spostare l’ombra lungo l’asse x, il secondo la muove sull’asse delle y, il terzo gestisce il livello di blur, mentre l’ultimo definisce il colore. le versioni di IE sotto la 9, utilizzano invece filter.

Ecco un un esempio di elementi con ombra esterna:

.box_shadow {
	-moz-box-shadow: 0px 0px 4px #000000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 4px #000000; /* Opera 10.5, IE 9.0 */
    filter: /* IE6,IE7 e IE8 */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) /* top */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) /* left */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) /* bottom */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5);  /* right */
}

• Firefox 3.5+
• Safari3+
• Chrome
• Opera 10.5
• IE6+

CSS3: sfumatura a gradiente verticale

Ecco cosa usare e per ottenere una sfumatura verticale. Da notare il mancato supporto di Opera:

.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
}

• Firefox 3.6
• Safari4
• Chrome
• IE6+

CSS3: effetto traparenza

Ecco come settare i CSS per ottenere un effetto trasparenza cross-browser. Di seguito il codice (notiamo che il filtro si comporta in questa maniera: il codice completo è #60CCFF00 dove 60 è l’Alpha, mentre il codice colore vero e proprio è CCFF00. Attenzione!):

.box_rgba_1 {
	background-color: rgba(204, 255, 0, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00'); /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00')"; /* IE8 */
}

• Firefox 3+
• Safari3+
• Opera 10.10+
• Chrome
• IE6+

CSS3: rotazione

Ecco come realizzare una rotazione cross-browser solo con i CSS: per prima cosa scaricate il file -ms-transform.htc e salvatelo nella cartella dei file CSS. Poi settate le regole come segue:

.rotate {
	behavior:url(-ms-transform.htc); /* IE6+ */
    -moz-transform:rotate(45deg); /* FF3.5+  */
    -webkit-transform:rotate(45deg); /* Saf3.1+, Chrome */
    -o-transform:rotate(45deg); /* Opera 10.5 */
    -ms-transform:rotate(45deg); /* IE */
}

• Firefox 3.5+
• Safari3.1+
• Opera 10.5+
• Chrome
• IE6+

…ed ecco come appaiono dei div ruotati.

CSS3: @font-face

Prima di iniaziare, ecco una guida essenziale al @font-face.
Scarichiamo un font e generiamo le regole CSS3.
La regola di base che ci serve per includere i font in pagina poggia sulla direttiva @font-face: occorre definire una regola @font-face per ciascun font che intendiamo utilizzare:

@font-face {
	font-family: 'IlMioFont';
	src: url('ballpark_weiner.eot'); /* IE6+ */
	src: local('Ballpark'),
		 local('IlMioFont'),
		 url('ballpark_weiner.woff') format('woff'), /* FF3.6 */
		 url('ballpark_weiner.ttf') format('truetype') /* Saf3+,Chrome,Opera10+ */
	;
}

…e usare i nostri font nelle dichiarazioni CSS consuete. In questo modo:

#ilMioSelettore {
	font:30px 'IlMioFont', Georgia, serif;
	color:#000;
}

• Firefox 3.6+
• Safari3+
• Opera 10+
• Chrome
• IE6+

Articoli correlati:

1. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
3. CSS Pseudo-classi: come usarle su IE6+!

Novità in HTML5

HTML5 introduce nuove caratteristiche per uno sviluppo più facile delle applicazioni web improntate alla multimedialità e una gestione più sofisticata dei form, assieme a una presentazione più semantica del codice: nuovi elementi tag, nuovi input type, nuovi attributi ed eventi, nuove API.
Ecco di seguito una lista di tutte le principali novità e le anteprime:

1. Nuovi elementi HTML5

Elementi strutturali più semantici

• article contrassegna gli articoli di una sezione
• aside delimita informazioni aggiuntive
• footer rappresenta la sezione conclusiva della pagina
• header contiene i contenuti principali eventualmente raggruppati con hgroup
• nav raggruppa gli elementi di navigazione principale
• section distingue le sezioni di un documento, come se fossero capitoli di un libro

e torna nell’HTML, dopo essere stato deprecato dalla versione 4.01, il tag

• menu usato per una specifica lista di comandi

Interattività

• canvas permette il rendering dinamico delle bitmap
• command definisce un command button
• details rappresenta informazioni aggiuntive

Maggiore semantica in pagina e lingue asiatiche

• figure raggruppa elementi multimediali e le loro didascalie
• mark mette in risalto una porzione di testo rilevante
• rp, rt e ruby sono usati per le parentesi e per le annotazioni di Ruby

Multimedialità nativa

• audio consente la riproduzione audio nativa nel browser
• embed inserisce una applicazione esterna
• source specifica più sorgenti di un video o di un audio
• video definisce un video

Form migliorati

• datalist fornisce una sorta di auto-complete
• keygen definisce una coppia di keygen generate
• output rappresenta il risultato di un calcolo

Tempo e unità di misura

• meter definisce le unità di misura
• progress indica lo stato di avanzamento di un compito
• time specifica il formato di una data

Alcuni tag già definiti nella versione 4.01, in HTML5 assumono nuove proprietà. Ecco i principali nel dettaglio:

• il tag a potrà contenere elementi a livello di blocco, è potrà essere privo dell’attributo href, per essere usato come "link placeholder"
• l’elemento address potrà essere applicato a una specifica sezione section o articolo article
• l’elemento b verrà utilizzato solo per rendere il testo più marcato, senza particolari valenze keyword-SEO
• blockquote diventa un elemento sectioning root
• l’elemento dl rappresenta un elenco di associazioni composto da zero o più coppie nome-valore
• i tag h1, h2… possono essere ripetuti all’interno di ogni sezione della pagina
• l’elemento html potrà avere un proprio id
• il tag i verrà usato per indicare il testo da pronunciare con un particolare tono di voce, o testo che appartiene a un linguaggio tecnico, o una frase che nel contesto da cui è presa viene rappresentata con testo "italic"

2. Nuovi input type

Ecco la lista dei campi input si potranno utilizzare con HTML5:

• color
• date
• datetime
• datetime-local
• email
• number
• range
• search
• tel
• time
• url
• week

Articoli correlati:

1. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
2. Cosa è HTML5? Ecco una infografica che lo spiega!
3. Cheat Sheets per il Web Design

La prprietà outline disegna una linea tratteggiata intorno all’elemento cui è applicata: outline è simile a border, nel senso che viene disegnata una linea intorno all’elemento, fuori dal bordo dell’elemento, ma a differenza di border, non è impossibile impostare una larghezza diversa per ogni lato, oppure impostare i colori e stili diversi per ogni lato. La struttura è la stessa su tutti i lati.

La proprietà outline non intacca il box model, non viene aggiunto in alcun modo alla larghezza o altezza dell’elemento.
Per azzerare la sua comparsa, settiamo così i CSS:

a {
	outline:none;
}

Così facendo lo abbiamo azzerato completamente per tutti gli stati del link, per esempio:

/* link - yellow */
/* link visitato - cyan */
/* mouse over sul link - firebrick */
/* link selezionato - lawn green */

a.one:link {color: yellow}
a.one:visited {color: #00FFFF}
a.one:hover {color: #B22222}
a.one:active {color: #7CFC00}

non avranno il bordo tratteggiato.

C’è da notare che le pseudoclassi per funzionare correttamente devono, a causa delle regole della Ereditarietà, cascade, conflitti tra stili, seguire un ordine ben prestabilito: l’ordine in cui vanno inserite in un CSS le dichiarazioni relative ai link è:

1. link
2. visited
3. hover
4. active

Per venire incontro alle esegenze estetiche senza intaccare l’usabilità, la soluzione migliore tra le tante, è settarlo a none solo per lo stato hover e active

a:hover, a:active { outline: none; }

Siamo così sicuri che gli utenti che utilizzano la tastiera potranno vedere i bordi tratteggiati quando scorreranno col TAB su un link e attiveranno lo stato focus.

Articoli correlati:

1. CSS: Bottoni espandibili con una sola immagine
2. CSS3: compatibilità cross-browser…da oggi!
3. Tabelle HTML: come usarle, quando usarle

La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato, bensì c’è un interprete incluso nel browser, e dato che ognuno (ma soprattutto IE) interpreta con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.

Cos’è jQuery?

Proprio per “facilitare” la creazione di pagine web, nel 2006 John Resig pubblicò la prima versione del suo ormai famosissimo framework: jQuery.
jQuery nasce quindi con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e con il più alto numero di plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework, ha una community estesa ed è facile da imparare.

JavaScript: cenni introduttivi

Per chi inizia da zero, ecco una breve introduzione alle buone e cattive pratiche da seguire nello scrivere codice JavaScript, quindi valide anche per jQuery.
Per prima cosa, maggiore è la separazione migliore è la qualità del nostro risultato.
Per ottenere ciò, è bene tenere a mente gli scopi per la quale una pagina web è scritta:

• descrivere il contenuto della pagina (HTML semantico)
• specificare la presentazione di tale contenuto (CSS)
• controllare il comportamento del contenuto (JavaScript)

Anche se è possibile agganciare per rapidità il codice JavaScript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href, questo rappresenta una cattiva pratica.

Evitare quindi gli handlers:

<a href="#" onclick="alert('Hello World');">click</a>

e il codice javaScript all’interno dell’attributo href:

<a href="javascript:alert('Hello World');">click</a>

È poi possibile inserire snippets di codice all’interno del tag script:

<script type="text/javascript">
	alert("Ciao mondo!");
</script>  

Sicuramente, a meno che non sia un piccolo esercizio, il codice JavaScript va messo in file esterni:

<script src="script.js" type="text/javascript"></script> 

La posizione migliore per chiarezza è all’interno del tag head, anche se alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di Google Analytics rispondesse per qualche ragione con tempi di attesa molto lunghi, ritarderebbe lo scaricamento dell’intera pagina web. Quindi, in generale è buon uso copiare gli script in locale, e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Ecco un’altra risorsa che illustra in modo esauriente questa tematica.

Iniziare ad usare jQuery

Per prima cosa occorre scaricare il core di jQuery, salvarlo in locale (per esempio: root\scripts\) e aggiungere all’intenro dell tag head il codice per richiamare la libreria. Così:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dove inserire il link al core di jQuery? Qui sotto!</title>
<meta name="description" content="jQuery Tutorial" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>

Possiamo poi iniziare a scrivere il codice in un file esterno, che va linkato dentro il tag head, dopo il link al core:

<script type=”text/javascript” src=”scripts/mioScript.js”></script>

Il codice di jQuery deve sempre iniziare con il costrutto $(document).ready(), per segnalare alla pagina di eseguire il codice quando tutto il contenuto è caricato:

$(document).ready(function(){
	// il codice va qui
});

In jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe.
Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine, seguita dal ;).

Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento.

Mostra/Nascondi elementi: toggle

Vogliamo creare un menù in cui ci saimo dei semplici box da mostrare/nascondere al click sul titolo.
Ecco tutte le risorse per completare il progetto e una preview del risultato:

1. Impostiamo la struttura e applichiamo gli stili

Incominciamo con l’impostare il menù, con il nostro primo contenuto, cioè il titolo con l’anchor, seguito dal contenuto vero e proprio, cioè il titolo h3 e un paragrafo di testo:

<div id="menu">
	<h2 class="trigger">
    <a href="#">Prima Voce del Menù</a>
	</h2>	<div class="container">
	 <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur
    congue justo, at ultricies diam mollis non.
    vestibulum libero. Donec consequat elementum
    tincidunt sapien malesuada fringilla.</p>
	</div>
</div>

Naturalmente possiamo inserire quanti elementi ci occorrono, all’interno del menù.
Applichiamo gli stili al codice, per esempio così:

body {
 font:normal 12px/14px "Lucida Sans Unicode",
 "Lucida Grande", sans-serif;
}
#menu {
 width:351px;
 margin:0 auto;
}
h2 {
 width:298px;
 padding:0 0 0 53px;
 height:40px;
 margin:0;
}
h2 a {
 color:#FFF;
 text-decoration:none;
 font-size:14px;
 line-height:40px;
}
h2.trigger {
 background:url(../gfx/bg_h2.jpg) left top no-repeat;
}
h2.active {
 background:url(../gfx/bg_h2.jpg) left bottom no-repeat;
}
.container {
 padding:20px;
 background:#f3f3f3;
 border:1px solid #999;
 color:#333;
}
h3 {
 margin:0;
 padding:0;
}
.container h3 {
 padding:0 0 20px 0;
 font-size:13px;
}
.container p {
 margin:0;
 padding:0;
}

2. Attiviamo il toggle con jQuery

Attiviamo odesso l’effetto toggle con jQuery. Per prima cosa nascondiamo tutti gli elementi cui è applicata la classe container. Selezioniamo poi tutti i titoli che hanno la classe trigger, applichiamo loro lo stile css cursor:pointer e attiviamo il toggle che aggiunge e rimuove la classe active. Per ultimo, agganciamo al click sul titolo il toggle:

$(document).ready(function()

  $(".container").hide();

  $("h2.trigger").css("cursor","pointer").toggle(function(){
  	$(this).addClass("active");
  }, function () {
  $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
  $(this).next(".container").toggle();
  });

});

Come si può notare, otteniamo un mostra nascondi piuttosto scattoso. Per ottenere un effetto "a tendina", possiamo utilizzare slideToggle:

$("h2.trigger").click(function(){
	$(this).next(".container").slideToggle("slow");
});

e ottenere una animazione più fluida.

Articoli correlati:

1. jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
3. PHP CSS o jQuery: come evidenziare la pagina corrente nel menù di navigazione

Le Cheat Sheet sono uno strumento di riferimento che fornisce semplici, brevi istruzioni per realizzare un compito specifico.

Ecco quindi di seguito una selezione di riferimenti rapidi per numerosi linguaggi e tecnologie web, gratuiti e stampabili:

ASCII – Caratteri speciali

Character Entity References in HTML 4 and XHTML 1.0
HTML: Special Characters
Decimal ASCII code, Reference, URL code and HTML entity
HTML special character reference
HTML – Special Entity Codes
Using HTML Symbol Entities

Colori e web

Coloreminder.com; find colors palette easily and inspiration
RGB Hex Colour Chart
Web safe color chart
The browser safe colors

CSS

CSS2.1 Sheet
CSS3 Sheet
CSS Shorthand Guide
CSS Property Index
CSS Cheat Sheet (V2)
CSS Cheat Sheet: Inheritance, Cascade, Specificity
CSS Shorthand Cheat Sheet
CSS Properties and Values
Esempi di utilizzo di CSS
Will the browser apply the rule(s)?

CSS3

Tutto quello che c’è da sapere su CSS3

Google

Google Guide Quick Reference: Google Advanced Operators
The Google Cheat Sheets: Everything You Need To Know

Freelance

Esempio di contratto per prestazione occasionale
Pubblicare un sito web: verifiche e controlli preventivi

HTML 5

HTML 5 Visual Cheat Sheet (Reloaded)
HTML 5 Cheat Sheet

HTML/XHTML

HTML Cheat Sheet
HTML Codes Cheat Sheet
Character Entity References in HTML 4 and XHTML 1.0
HTML Cheat Sheet: quick reference guide
A Simple Guide To HTML
Browser Compatibility Master Table
HTML/XHTML in one page

jQuery

jQuery 1.4 Cheat Sheet
Woork: jQuery Visual Cheat Sheet

Lorem Ipsum generators

Render dummy text in English, French, German…

Mac OS

The OS X Keyboard

Programmi Adobe

Dreamweaver CS4: Cheat Sheet and shortcuts
Photoshop: Toolbox Reference
Flash CS4: PC Shortcuts

SEO

Web Developer’s SEO Cheat Sheet

Tipografia e Font

The New CSS Font-Family List
Approximate Conversion from Points to Pixels
PX to EM conversion made simple.
Compare screen type
16 Gorgeous Web Safe Fonts To Use With CSS
Top 10 (Web Safe) Blogging Fonts
How safe are Web-safe Font Families really? Font preview

UI and wireframing

Sketching & Wireframing kit free set
UI and wireframing tools
Browser Safe Area

Windows

Alt Key + Numeric Codes

WordPress

WordPress Cheat Sheet
WordPress Help Sheet in Italiano

Cheat Sheet per tutto, tutte insieme!

All cheat sheets, round-ups, quick reference cards.

Articoli correlati:

1. SEO: guida pratica per ottimizzazione e posizionamento nei motori di ricerca
2. Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità
3. HTML5: tag nuovi e anteprima delle novità

1. Elementi block-level in HTML 4

Un elemento block-level è un elemento che forma un blocco separato, può contenere elementi block-level e elementi inline e gli si possono attribuire delle dimensioni. Gli elementi block-level vengono disposti verticalmente, formando una nuova riga. Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto.

• address fornisce le informazioni riguardo i contatti della pagina
• blockquote usato per blocchi di citazioni
• div è un blocco contenitore
• frameset è un contenitore che permette frames multipli (documenti html) da piazzarsi nel browser
• h1, h2, h3, h4, h5, h6 titoli della pagina o dei paragrafi
• hr serve per definire una linea orizzontale
• noframes contenuto alternativo per i brwser che non supportano i frames
• noscript contenuto alternativo per i browser che non eseguono gli script
• p paragrafo: non dovrebbe contenere altri elementi a livello di blocco, comprese le tabelle, ma possono contenere elementi a livello di lista
• pre testo preformattato che viene rendererizzato con gli spazi e le interruzioni di riga
• table è usata per presentare set di dati puri: i suoi elementi “figli” si comportano come elementi a livello di blocco. Può contenere altre tabelle
• form usato per presentare formulari: i suoi sotto-elementi si comportano come elementi a livello di blocco

I seguenti elementi possono essere considerati a livello di blocco dato che possono contenere elementi a livello di blocco:

• dd definizione di una descrizione
• dt definizione
• li List item
• tbody Table body
• td Table data cell
• tfoot Table foot
• th Table header cell
• thead Table head
• tr Table row

Tra di essi, questi sono considerati elementi List-item:

• dl lista di definizioni
• li elemento di una lista
• ol lista ordinata (numerata)
• ul lista non ordinata (non numerata)

2. Elementi in linea in HTML 4

Un elemento in linea è un elemento che rimane in linea con il resto del contenuto: può contenere solo altri elementi inline. Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display, non si possono attribuire delle dimensioni (in realtà un elemento inline può avere solo una sorta di "dimensione verticale" grazie alla proprietà line-height. La disposizione verticale di elementi inline con la proprietà line-height impostata rispetto ad altri elementi inline adiacenti e/o contenitori si controlla grazie alla proprietà vertical-align). Elementi inline adiacenti vengono disposti orizzontalmente. Un elemento inline occuperà sia in orizzontale che in verticale l’ altezza necessaria al suo contenuto.

• a denota testo ancora
• abbr denota una frase abbreviata
• acronym denota un acronimo
• area denota la regione di una mappa all’interno di una immagine
• big denota testo di grosse dimensioni
• bdo sovrascrive la direzione del testo con i valori di ltr (da sinistra a destra) o rtl (da destra a sinistra)
• br denota un a capo
• cite indica il titolo di un articolo o un documento citato
• code denota il codice di un computer
• dfn denota una definizione
• em denota una frase da enfatizzare
• img immagine (con altezza e larghezza intrinseca)
• ins denota testo inserito
• kbd denota testo inserito da tastiera
• q citazione breve
• samp denota un esempio
• small denota testo in piccole dimensioni
• span è un contenitore per testo da formattare in modo speciale
• strike inserisce una linea sul testo
• strong denota testo importante
• sub subscript
• sup superscript
• textarea un form per testo multilinea
• tt usato per teletypefont monospaziato
• var denota una variabile in un programma

3. Elementi Block/Inline in HTML 4

Questi elementi possono essere considerati a livello di blocco o in linea a seconda di come sono usati: sono in linea se sono inseriti dentro un paragrafo o dentro un elemento in linea. In questo caso non possono contenere elementi a livello di blocco.

• button Usato per definire il submit, reset o push button di un form
• del è usato per indicare una frase cancellata. È sia block che inline
• ins è usato per indicare una frase inserita. È sia block che inline
• map indica una mappa immagine, ed è usato con i tag img e object
• script definisce uno script da eseguire nel documento

Articoli correlati:

1. Tabelle HTML: come usarle, quando usarle