Prima di scendere nei dettagli presentando i nuovi elementi e le nuove API definite nella specifica, è necessario spendere qualche momento per parlare delle regole sintattiche introdotte dall’HTML5, per larga misura ereditate e razionalizzate dalla precedente versione delle specifiche. 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:

Codice HTML:

12345678Tag ‘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 della lezione, 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, è inveceopzionale. Possiamo dunque definire un tag <img> secondo le regole XHTML:

Codice HTML:

1<img src="immagine.png" alt="testo" />

O seguendo la vecchie regole di HTML 4:

Codice HTML:

1<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

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:

Codice HTML:

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

Codice HTML:

123456<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.
Attributi

Anche rispetto alle definizione degli attributi HTML5 consente una libertà maggiore rispetto a XHTML, segnando di fatto un ritorno alla filosofia di HTML 4. In sintesi: 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:

Codice HTML:

12345Secondo 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:

Codice HTML:

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

Codice HTML:

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

Codice HTML:

1<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 cometype:

Codice HTML:

123<style type="text/css"> regole CSS... </style>  <script type="text/javascript" src="script.js"> </script>

In HTML5 possiamo farne a meno, scrivendo dunque:

Codice HTML:

12<style> regole CSS... </style>  <script src="script.js"> </script>

Conclusioni

Come abbiamo sperimentato, 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:

Codice HTML:

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

Fonte: HTML.it

Bravissimo Bylom!
La fonte? mi raccomando mettila

Fonte inserita, l'avevo dimenticata.

Ottima guida, bravo Bylom

Grazie mara Spero che ti sia servita

Ottima guida, bravo.

L'utilizzo di:

Codice HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

non è più necessario da qualche mese, infatti basta aggiungere all'inizio solo

Codice HTML:

<!DOCTYPE html>

ed il gioco e fatto.

Originariamente Scritto da Mario9662

L'utilizzo di:

Codice HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

non è più necessario da qualche mese, infatti basta aggiungere all'inizio solo

Codice HTML:

<!DOCTYPE html>

ed il gioco e fatto.

Grazie dell'informazione.