ttp://www.html.it/guide/guida-html5 

3 La sintassi di HTML5

In primo luogo familiarizziamo con il concetto noto di tag. Esistono tre distinte versioni di questa particella, ognuna di esse si applica selettivamente solo ad alcuni elementi:

Tag 'classico'
<p> bla bla bla bla ... </p>

Tag 'vuoto'
<img src="/immagine_interessante.jpg" alt="Una immagine interessante">

Tag 'autochiudente'
<rect x="150" y="40" width="60" height="30" fill="black" stroke="black"/>

Gli elementi HTML5 si possono dividere in tre categorie sulla base della tipologia di tag da usare per implementarli.

1. Elementi normali: sono quelli che possono racchiudere dei contenuti sotto forma di testo, commenti HTML, altri elementi HTML, etc. Sono elementi normali, dunque, i paragrafi (<p>), le liste (<ul>), i titoli (<h1>), etc. Salvo specifici casi, cui accenneremo nel seguito, gli elementi normali vengono definiti attraverso un tag di apertura (<p>) e un tag di chiusura (</p>).

2. Elementi vuoti: gli elementi vuoti sono quelli che non possono avere alcun contenuto. Per questi elementi si utilizza un tag ‘vuoto’. Essi sono: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.
   Per gli elementi vuoti, la chiusura del tag, obbligatoria in XHTML, è invece opzionale. Possiamo dunque definire un tag <img> secondo le regole XHTML:  <img src="/immagine.png" alt="testo" />
   O seguendo la vecchie regole di HTML 4:  <img src="/immagine.png" alt="testo">

3. 3. Elementi provenienti da altri namespace: per questi elementi sono richiesti i tag ‘autochiudenti’. Si tratta degli elementi adottati da specifiche esterne, come SVG e MathML.

Maiuscolo, minuscolo

Una delle differenze principali rispetto alle regole XHTML riguarda l’uso del maiuscolo e del minuscolo per definire un tag. In XHTML è obbligatorio usare il minuscolo. In HTML5 è consentito scrivere un tag usando anche il maiuscolo:   <IMG src="/immagine.png" alt="testo">

Casi particolari

Esistono alcune casistiche per le quali un tag classico può mancare della sua particella di apertura o di chiusura; questo succede quando il browser è comunque in grado di determinare i limiti di operatività dell’elemento. Gli esempi più eclatanti riguardano i tag ‘contenitori’, come head, body e html, che possono essere omessi in toto a meno che non contengano un commento o del testo come istruzione successiva. È quindi sintatticamente corretto scrivere un documento come segue:
<meta charset="utf-8">
<title>Pagina HTML5 Valida</title>
<p>Un paragrafo può non avere la particella di chiusura
<ol>
   <li>e anche un elemento di lista
</ol>

Notiamo che, come mostrato nell’esempio, anche i tag p e li possono essere scritti omettendo la particella di chiusura, a patto che l’elemento successivo sia all’interno di una cerchia di elementi definita dalle specifiche. A fronte di queste opzioni di semplificazione è però errato pensare che la pagina generata dal codice di cui sopra manchi, ad esempio, dell’elemento html; esso è infatti dichiarato implicitamente ed inserito a runtime dallo user-agent.

Per un quadro dettagliato rimandiamo a questa sezione delle specifiche.

 Attributi

 non è più obbligatorio racchiudere i valori degli attributi tra virgolette.

I casi previsti nella specifica sono 4.

Attributi ‘vuoti’: non è necessario definire un valore per l’attributo, basta il nome, il valore si ricava implicitamente dalla stringa vuota. Un caso da manuale:
Secondo le regole XHTML: <input checked="checked" />
In HTML5: <input checked>

Attributi senza virgolette: è perfettamente lecito in HTML5 definire un attributo senza racchiudere il valore tra virgolette. Esempio:
<div class=testata>
Attributi con apostrofo: il valore di un attributo può essere racchiuso tra due apostrofi (termine più corretto rispetto a ‘virgoletta singola’). Esempio:
<div class='testata'>
Attributi con virgolette: per concludere, è possibile usare la sintassi che prevede l’uso delle virgolette per racchiudere il valore di un attributo. Il codice:
<div class="testata">

 

Semplificazioni

In direzione della semplificazione vanno anche altre indicazioni. Ci soffermiamo su quelle riguardanti due elementi fondamentali come style e script. La sintassi tipica di XHTML prevede la specificazione di attributi accessori come type:
<style type="text/css"> regole CSS... </style> 
<script type="text/javascript" src="/script.js"> </script>

In HTML5 possiamo farne a meno, scrivendo dunque:
<style> regole CSS... </style> 
<script src="/script.js"> </script>

Conclusioni

 La sintassi HTML5 si caratterizza per una spiccata flessibilità e semplicità di implementazione.

Le osservazioni che abbiamo snocciolato in questa lezione sono chiaramente valide a patto di implementare la serializzazione HTML; ricordiamo infatti che le specifiche prevedono anche l’utilizzo di una sintassi XML attraverso l’uso delle istruzioni:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Infine, per una migliore leggibilità del codice sorgente, consigliamo di ricorrere il meno possibile all’utilizzo di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa.

 

4 Elementi disegnati per un web moderno

All’inizio erano tabelle; ricordiamo tutti bene il tedio provocato dal dover costruire strutture complesse spezzandole all’interno di una griglia fatta da infiniti <tr> e <td>: un attività noiosa, resa ancora peggiore dalla scarsa qualità e flessibilità del risultato. Poi arrivarono i <div> e fu una vera e propria rivelazione; finalmente un modello di costruzione del documento pensato per separare in modo chiaro i contenuti tipici di una pagina web. Grazie alla commistione tra questo elemento e i CSS nacquero pagine con codici HTML eleganti e leggibili come:

<html>
<head>
</head>
  <body>
    <div id="header">
      --- Titolo e Testata ---
    </div>
    <div id="body">
       <div id="menu">
       --- Voci di Menu ---
       </div>
       <div id="main_content">
          <div class="post">
          --- Un Post ---
          </div>
          <div class="post">
          --- Un altro Post ---
          </div>
      </div>
    </div>
  </body>
</html>
 
All’interno di un costrutto come questo è tutto molto semplice da interpretare: basta seguire il flusso dei rientri di pagina facendosi guidare dai valori semantici attribuiti a id e class.
Passarono anni e il modello cominciò a mostrare le sue prime debolezze; in primo luogo ci si accorse che da un lato non vi era una regola collettiva e quello che per uno sviluppatore era ‘body’ per l’altro poteva benissimo essere ‘corpo’; inoltre si realizzò che né il browser né tantomeno i motori di ricerca avrebbero mai potuto beneficiare di questa divisione semantica, proprio per colpa di quell’arbitrarietà che permetteva a milioni di siti web di essere organizzati in strutture simili ma sempre leggermente diverse tra loro e per questo non raggruppabili secondo schemi automatici. Emerse in questo modo uno dei più grandi problemi dell’HTML4: l’incapacità di descrivere il significato delle informazioni di una pagina web in un formato interpretabile da altri software. In un mondo sempre più caratterizzato dall’interconnessione e dall’aggregazione su base semantica dei contenuti ci si adattò inventando e condividendo convenzioni studiate per rappresentare eventi di calendario, persone e quant’altro; nacquero così diversi microformati, come ad esempio hRecipe  per le ricette:
<span class="hrecipe">
    <span class="fn">Tisana alla liquirizia</span>
    <span class="ingredient">2 cucchiai di Zucchero</span>
    <span class="ingredient">20g Radice di liquirizia</span>
    <span class="yield">2</span>
    <span class="instructions">
        Scaldare un pentolino con 200cl d’acqua fino a 95°C;
        versare la radice di liquirizia;
        lasciar macerare per 7 minuti;
        zuccherare e servire.
    </span>
    <span class="duration">
        <span class="value-title" title="PT90M"></span> 90 min
    </span>
</span>
L’HTML5 nasce per gestire ed incanalare tutte queste problematiche; nelle prossime lezioni scopriremo come beneficiare di nuovi tag disegnati appositamente per le più comuni strutture di contenuto e di attributi utilizzabili per definire ulteriore contenuto semantico alle pagine. Ma per arrivare a questo prima serve fare un po’ di pulizia…

Elementi e attributi non più previsti nelle specifiche
Le secipfiche HTML5 sanciscono definitivamente la fine di tutta una serie di elementi e attributi che mantengono validità formale solo per preservare la retrocompatibilità di pagine datate ma sono espressamente vietati nella creazione di nuovi documenti.
I primi a subire questo esilio sono tutti quei costrutti funzionali alla parte di presentazione e caduti ampiamente in disuso con l’introduzione dei fogli di stile. Stiamo parlando di elementi come: basefont, big, center, font, s, strike, tt e u.
Ad essi si aggiunge una moltitudine di attributi più o meno noti, tra i quali ricordiamo: align e valign, background, bgcolor, cellpadding, border, cellspacing e molti altri. In realtà alcuni tra i citati perdurano solamente su specifici elementi, per una lista completa ed esaustiva consigliamo di visionare questa pagina del W3C dedicata al tema.
Interessante notare come si sia deciso invece di mantenere elementi come i e b; trasformandoli, però, da modificatori tipografici a semplici indicatori di porzioni di testo particolari e consentendone l’uso solo come ultima risorsa.
La falce della semplificazione si è successivamente abbattuta su un piccolo elenco di elementi obsoleti: acronym (sostituibile dal più comune abbr), applet (rimpiazzato da object), isindex (già arcaico in HTML4) e in fine dir, sfavorito nel confronto con ul.
Cadono, infine, anche tutti i tag che gravitano intorno al concetto dei frame, ritenuti dannosi per usabilità e accessibilità: frame, frameset e noframes.
E con questi ultimi si chiude la lista degli elementi soppressi; in loro onore terminiamo la lezione con un piccolo snippet che li omaggi:
<center>
    <font color="blue" size="2">
        <big>Addio</big>,
        <s>monti sorgenti dall'acque, ed elevati al cielo;
        cime</s> elementi di markup inuguali,
        noti a chi è cresciuto tra voi,
        e impressi nella sua mente,
        non meno che lo sia l'aspetto de' suoi più familiari.
    </font>
    Liberamente adattato da: <acronym title="I Promessi Sposi">IPS</acronym>
</center>

5 Attributi globali

Di attributi globali (quelli cioè che si possono applicare a tutti gli elementi HTML) ce ne sono sempre stati: basti pensare al classico ‘id’, disponibile da sempre sulla totalità degli elementi. HTML5 formalizza questa definizione e arricchisce lo sparuto gruppo con nuovi membri che, come intuibile, possono essere applicati a un qualsiasi tag di queste specifiche. 

Modificare il contenuto di una pagina: contenteditable

TinyMCE, CKEditor e WYMeditor sono solo tre di una lunga lista di librerie studiate per offrire uno strumento di editing testuale su web che superi le classiche textarea. I risultati sono già ad oggi eccellenti, vicini a prodotti desktop come Microsoft Word, ma le soluzioni implementate fanno tutte uso di escamotage più o meno furbi per ottenere questo livello di interazione in quanto l’HTML 4 non prevede alcun modo esplicito di generare controlli del genere.

Durante la stesura delle specifiche HTML5 questo problema è stato affrontato e si è deciso di sviluppare un approccio comune al rich-editing di un documento re-introducendo un set di specifiche implementate in sordina da Microsoft nella versione 5.5 di Internet Explorer. Questo lavoro ha portato alla creazione di un nuovo attributo globale: contenteditable, che impostato a true su di un qualsiasi elemento lo rende modificabile da browser; lo stesso destino subiscono tutti gli elementi in esso contenuti a meno che non espongano un esplicito contenteditable=false.

Ma… cosa significa esattamente modificabile da browser? Che tipo di feedback visivo ci si dovrebbe aspettare? E come si comporterebbe il markup a fronte delle modifiche? Sfortunatamente qui le specifiche non sono troppo chiare e sanciscono semplicemente che qualsiasi cosa venga concessa all’utente il risultato deve comunque restare conforme all’HTML5: questa libertà operativa ha prodotto comportamenti diversi da browser a browser; ad esempio c’è chi traduce il tasto invio com un <br> e chi invece crea un nuovo paragrafo con <p>. Parallelamente è disponibile anche un set di API utilissime per insistere sulla zona modificabile con comandi attivati dall’esterno, come ad esempio da una toolbar. Un pulsante che volesse attivare/disattivare il grassetto sulla selezione corrente dovrebbe invocare la seguente funzione:

document.execCommand('bold')

Prima di passare oltre sappiate che l’attributo contenteditable è stato applicato con valore true a all’intera sezione precedente con l’esclusione di questo paragrafo, permettendovi così di editarla e sperimentare l’interazione di questa nuova interessante caratteristica! (e se selezionate del testo e cliccate qui , potrete renderlo grassetto!).

Menu contestuali associati ad un elemento: contextmenu

L’attributo globale contextmenu serve ad associare a un elemento un menu contestuale; questa forma di interazione è poco comune sul web ma molto praticata sul desktop dove, ad esempio, su di una cartella di sistema ci si aspetta di poter operare azioni quali ‘copia’, ‘elimina’ e ‘rinomina’. Vediamo un esempio:

<img src="http://farm4.static.flickr.com/3623/3527155504_6a47fb4988_d.jpg"
contextmenu="image_menu">
<menu type="context" id="image_menu">
    <command label="Modifica il contrasto" onclick="contrastDialog();">
    <command label="Negativo" onclick="negativo();">
</menu>

Cliccando con il tasto destro del mouse sull’immagine il browser dovrebbe mostrare un menu contenente le due azioni disponibili. Purtroppo ad oggi non esiste ancora nessuna implementazione funzionante di questa feature, che resta al momento relegata a semplice specifica.

Lʼattributo data-*

L’HTML5 predispone la possibilità di associare ad ogni elemento che compone la pagina un numero arbitrario di attributi il cui nome può essere definito dall’utente sulla base di esigenze personali, a patto che venga mantenuto il suffisso ‘data-’; ad esempio:

<img id="ombra"
    class="cane"
    data-cane-razza="mastino corso”
    data-cane-eta="5"
    data-cane-colore="nero"
    src="la_foto_del_mio_cane.jpg">

È inoltre interessante notare come queste informazioni, che arricchiscono e danno valore semantico all’elemento, siano accessibili anche attraverso un comodo metodo Javascript:

alert("Ombra ha :" + document.getElementById("ombra").dataset.caneEta + " anni");

 

La fine del display:none in linea: hidden

L’attributo globale hidden è stato introdotto per offrire un’alternativa all’utilizzo del predicato ‘style="display:none"’ che ha subito una proliferazione incontrollata soprattutto a seguito della diffusione di librerie Javascript come jQuery o Prototype. Un elemento marcato come hidden deve essere considerato dallo user agent come non rilevante e quindi non visualizzato a schermo.

 

Spellcheck

La quasi totalità dei browser oggi in commercio contiene un motore di verifica della sintassi grammaticale. Le specifiche HTML5 introducono un meccanismo per abilitare o disabilitare il controllo della sintassi su porzioni della pagina modificabili dall’utente. L’attributo in questione si chiama spellcheck e, quando impostato a true, ordina al browser di attivare il proprio correttore sull’elemento corrente e su tutti i suoi figli.

Laddove invece non venga impostata nessuna preferenza, le specifiche prevedono che il browser utilizzi un proprio comportamento di default.

 

Altri attributi globali

Ci sono un paio di altri attributi globali introdotti dalle specifiche e non trattati in questa sede, draggable e aria-*; entrambi sottendono un discorso che si estende ben al di là della semplice implementazione di markup e verranno trattati più avanti nella guida.

Ecco comunque la lista di tutti gli attributi globali previsti dalla specifica:

accesskey, class, contenteditable, contextmenu, dir, draggable
hidden, id, lang, spellcheck, style, tabindex, title

Ora introdurremo il nuovo content model, pensato non più nella forma binaria ‘block’ e ‘inline’ ma articolato in una serie di modelli di comportamento complessi ed interessanti.

6 Un nuovo content model

Non più solo div

Ecco come si potrebbe codificare l’esempio della lezione precedente utilizzando i nuovi elementi messi a disposizione dall’HTML5:

<!doctype html>
<html lang="it">
<head>
</head>
  <body>
    <header>
    --- Titolo e Testata ---
    </header>
    <nav>
    --- Voci di Menu ---
    </nav>
    <article>
    --- Un Post ---
    </article>
    <article>
    --- Un altro Post ---
    </article>
</body>
</html>

Come si può notare, i tag introdotti hanno un nome in strettissima attinenza con il proprio contenuto; questo approccio risolve in modo elegante sia il problema dell’utilizzo dell’attributo class con valore semantico, sia la riconoscibilità delle singole aree del documento da parte di un browser. Ma non è tutto; l’introduzione di article, nav, header e altri tag che vedremo, impone anche sostanziose novità al modo in cui lo user-agent deve comportarsi nell’interpretare questi elementi.

Contenuti in una bolla di sapone

Partiamo dal seguente esempio HTML4: