La sintassi di HTML5

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. 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: 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.

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

style e script. La sintassi tipica di XHTML prevede la specificazione di attributi accessori come type:

La sintassi tipica di XHTML prevede la specificazione di attributi accessori come type:

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

 ------

La fine del display:none in linea: hidden Un elemento marcato come hidden deve essere considerato dallo user agent come non rilevante e quindi non visualizzato a schermo.

 Un nuovo content model

<!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.

-----

Panoramica sui content  infografica

Metadata content

Fanno parte di questa categoria tutti gli elementi utili alla definizione del documento nel suo insieme: a livello di presentazione o di funzionamento.

Tag: base, command, link, meta, noscript, script, style, title.

Sectioning content

È importante utilizzare almeno un appartenente alla categoria heading content all’interno di ognuno di questi tag,

Tag:article, aside, nav, section.

Heading content Tutti gli appartenenti a questo gruppo servono per definire titoli.

Tag: h1, h2, h3, h4, h5, h6, hgroup

Phrasing content

Incorpora il testo del documento così come tutti i modificatori tipografici e visuali dello stesso.

Tag: a (solo se contiene phrasing content a sua volta), abbr, area (se figlio di un elemento map), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (solo se contiene phrasing content a sua volta), dfn, em, embed, i, iframe, img, input, ins (solo se contiene phrasing content a sua volta), kbd, keygen, label, map (solo se contiene phrasing content a sua volta), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr.

Embedded content

incorporano nella pagina oggetti esterni.

Tag: audio, canvas, embed, iframe, img, math, object, svg, video.

 Interactive content

Questa categoria comprende tutto ciò specificatamente studiato per interagire con l’utente.

 Tag: a, audio (con l’attributo controls presente), button, details, embed, iframe, img (con l’attributo usemap presente), input (con l’attributo type diverso da hidden), keygen, label, menu (con l’attributo type="toolbar"), object (con l’attributo usemap presente), select, textarea, video (i con l’attributo controls presente).

ogni elemento può appartenere ad uno o più content models, anche a seconda della sua configurazione degli attributi.

 flow, che raggruppa la quasi totalità degli elementi

--------

Header

Il tag header serve a rappresentare “un gruppo di ausili introduttivi o di navigazione”

  1. L’elemento <header> è un contenitore per altri elementi.

  2. L’elemento <header> non va confuso con quella che è la testata/intestazione principale di un documento (quella che oggi si definisce in genere con il tag <h1>).

  3. La natura e gli scopi dell’elemento <header> non dipendono dalla sua posizione nel documento, ma dai suoi contenuti (ausili alla navigazione o elementi introduttivi).

  4. Il suo uso non è obbligatorio e in alcuni casi può risultare superfluo se non utilizzato in maniera appropriata.

 <header>
    <h1>Questo è un titolo</h1>
    <h2>Questo è un sotto-titolo</h2>
 [...]
</header>

 

Footer

Funzioni e dati tecnici

L’elemento <footer> deve contenere in genere informazioni sulla sezione che lo contiene come:

  • i dati di chi ha scritto i contenuti;

  • collegamenti ai documenti correlati;

  • i dati di copyright;

  • e così via…

  • Non necessariamente deve essere inserito solo alla fine di un documento.

  • Quando contiene intere sezioni, esse rappresentano: appendici, indici, note, accordi di licenza e altri contenuti del genere.

  • Non introduce una nuova sezione e quindi non è rilevante per l’outliner.

  • All’interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo stesso elemento.

 <footer>
    <small>©2011 Autore contenuto. Design by Designer sito </small>
</footer

 tag<dl>nella specifica HTML5 questo elemento viene ridefinito come contenitore di metadati e quindi semanticamente corretto all’interno del nostro <footer>

 

L’elemento <footer> potrebbe essere inserito anche all’inizio di un documento subito dopo il <body> oppure all’apertura di un tag <article> ma in questi casi non dovrebbe contenere elementi introduttivi riguardo il contenuto della sezione che lo contiene; il suo uso in questa posizione potrebbe essere dovuto solamente a ragioni pratiche come ad esempio la duplicazione del <footer> in fondo alla pagina quando i contenuti della stessa sono molto lunghi:

 

Section

Funzioni e dati tecnici

Il tag <section>, secondo la definizione presente nella specifica HTML5, rappresenta una sezione generica di un documento o applicazione. L’elemento <section>, in questo contesto, individua un raggruppamento tematico di contenuti,ed in genere contiene un titolo introduttivo.

Vediamo quindi quali sono i punti fondamentali da ricordare riguardo il suo utilizzo:

  1. l’elemento <section> non deve essere utilizzato in sostituzione del <div> per impostare graficamente la pagina; inoltre è fortemente consigliato utilizzare i <div> anche quando risultano più convenienti per gli script;

  2. l’elemento <section> non deve essere preferito all’elemento <article> quando i contenuti possono essere ripubblicati anche su altri siti;

  3. l’elemento <section> e l’elemento <article> non sono indipendenti ed esclusivi: possiamo avere sia un <article> all interno di un <section> che viceversa.

L’elemento <section> può essere utilizzato in combinazione con l’attributo cite attraverso il quale è possibile specificare l’url dalla quale si stanno riportando i contenuti.

 

Il tag <section> rappresenta un elemento che viene considerato una sezione a sé stante dall’outliner e quindi un blocco con dei contenuti univoci che necessitano di un titolo (<hN>) che li riassuma. Come vedremo nelle prossime lezioni esistono anche altri elementi nelle specifiche HTML5 che sono considerati “contenitori di sezi

Article

Il tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito; infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine.

Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, l’articolo di un blog, un commento, un widget interattivo, o qualsiasi cosa che abbia un contenuto indipendente.

  1. quando gli elementi <article> sono nidificati, gli <article> interni rappresentano gli articoli che sono in linea di principio relativi al contenuto dell’<article> esterno. Ad esempio, un blog che accetta commenti dagli utenti potrebbe rappresentarli come <article> figli annidati all’interno dell’elemento padre <article>;

  2. le informazioni relative all’autore dell’<article> non devono essere replicate all’interno degli elementi nidificati all’interno dello stesso;

  3. l’elemento <time> con l’attributo pubdate può essere utilizzato per definire la data di pubblicazione dell’<article>;

  4. l’elemento <section> e l’elemento <article> non sono indipendenti ed esclusivi: possiamo avere sia un <article> all interno di un <section> che viceversa.