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.
-
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>
). -
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"> -
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”
-
L’elemento
<
header
>
è un contenitore per altri elementi. -
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>
). -
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). -
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:
-
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; -
l’elemento
<section>
non deve essere preferito all’elemento<article>
quando i contenuti possono essere ripubblicati anche su altri siti; -
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.
-
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>
; -
le informazioni relative all’autore dell’
<article>
non devono essere replicate all’interno degli elementi nidificati all’interno dello stesso; -
l’elemento
<time>
con l’attributopubdate
può essere utilizzato per definire la data di pubblicazione dell’<article>
; -
l’elemento
<section>
e l’elemento<article>
non sono indipendenti ed esclusivi: possiamo avere sia un<article>
all interno di un<section>
che viceversa.