Le regole sintattiche dell'HTML5 sono per la maggior parte ereditate dalla specifica precedente, quello che si può dire in linea generale è che la rigidità di tali regole è un po' più allentata in direzione della semplificazione a livello di scrittura dei tag e degli attributi per mezzo di dichiarazioni implicite.
Possiamo quindi descrivere tali regole con degli esempi visti in relazione alla notazione precedente (HTML4/XHTML).
La seguente porzione di codice mostra una pagina web che utilizza la notazione XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it-IT">
<body>
<head>
<title>Esempio di una pagina completa valida in HTML4/XHTML/HTML5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<p>Alcuni elementi possono non avere il tag di chiusura<br />se non sono seguiti da un commento</p>
<ul>
<li>elemento di una lista non chiuso</li>
<li>elemento di una lista non chiuso</li>
</ul>
<img src="/immagine.jpg" alt="descrizione immagine" class="imgborder" />
<input type="button" name="button_1" value="cliccami" disabled="disabled" />
<style type="text/css"> .imgborder {border:solid 1px #000;} </style>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>La stessa pagina in HTML5 può essere scritta in questo modo:
<meta charset="utf-8">
<title>Esempio di una pagina completa valida in HTML5</title>
<p>Alcuni elementi possono non avere il tag di chiusura<br>se non sono seguiti da un commento
<ul>
<li>elemento di una lista non chiuso
<li>elemento di una lista non chiuso
</ul>
<IMG src="/immagine.jpg" alt="descrizione immagine" class=imgborder>
<input type="button" name="button_1" value="cliccami" disabled>
<style> .imgborder {border:solid 1px #000;} </style>
<script src="/script.js"></script>Nonostante l'apparenza le due pagine sono scritte entrambe nel modo corretto (ognuno con la relativa specifica) e danno il medesimo risultato.
Mettendole a confronto è possibile notare subito l'assenza dei tag html, body e head nel primo blocco di codice che, se non seguiti da un commento, possono essere omessi lasciando la loro interpretazione ed inserimento a run-time da parte del browser.
E' previsto che per alcuni tag, come i paragrafi (p), può non essere presente la relativa chiusura in particolari condizioni, nel caso specifico dell'esempio la mancata chiusura è consentita perchè tale tag è seguito da un elemento facente parte di un gruppo di elementi definiti nella specifica; così come anche il tag per gli elementi di una lista (li) in quanto è seguito da un altro elemento lista o dalla chiusura dell'elemento padre.
Tali regole sintattiche per i tag opzionali possono essere consultate in maniera completa sul sito w3.org nella relativa categoria dedicata alla sintassi HTML5.
Altre differenze che possono essere identificate tra le due porzioni di codice sono la possibilità di utilizzare tag vuoti invece di quelli autochiudenti come mostrato per il tag br presente nel testo contenuto nell'elemento paragrafo e nel tag immagine. Per quest'utilimo è possibile notare che in HTML5 l'uso del maiuscolo o del minuscolo è indifferente.
Anche gli attributi possono essere semplificati. L'attributo disabled del bottone, data la sua presenza, è implicitamente assegnato in HTML5. Non è inoltre obbligatorio racchiudere il valore di un attributo tra le virgolette o l'apostrofo, come si nota dal valore dell'attributo class del tag immagine. Inoltre alcuni attributi possono essere omessi del tutto perchè il browser è in grado di interpretarli a prescindere, è il caso dei tag style e script ma anche del meta tag per definire la codifica del documento.
Personalmente, dato che HTML5 consente anche l'uso di notazioni precedenti, suggerisco ove possibile, di evitare l'utilizzo di questa pratica di semplificazione in quanto, nonostante i browser siano in grado di interpretare gli elementi omessi e quindi possano dare una maggiore garanzia di compatibilità cross-browser, scrivendo con una sintassi più esplicita come quella dell'XHTML si ha una più chiara leggibilità ed una maggiore integrità del codice.
Necessario è un breve accenno a quegli elementi che possono essere sempre presenti nelle pagine web per garantire retrocompatibilità ma che non sono più previsti, per non dire permessi, nelle specifiche HTML5, alcuni di essi sono center, font, strike, acronym, align, frame e molti altri.
E' possibile trovare una lista completa di questi attributi obsoleti nel relativo paragrafo della stessa pagina di w3.org linkata poco sopra.
Tra gli attributi definiti globali, ovvero quelli che possono essere attribuiti a qualsiasi tipo di elemento HTML (come il noto id), ce ne sono di nuovi quali:
- contenteditable: rende il testo contenuto in un determinato elemento modificabile da parte dell'utente. Vedere le specifiche msdn direttamente sul sito della Microsoft.
- contextmenu: associa ad un elemento (bottone, immagine, ...) un menù di tipo contestuale (non utilizzato sul web):
<input type="button" contextmenu="btn_menu_ctx">
<menu type="context" id="btn_menu_ctx">
<command label="Apri" onclick="apri();">
<command label="Copia" onclick="copia();">
<command label="Incolla" onclick="incolla();">
</menu>- data-*: suffisso per associare un attributo con un nome personalizzato in base all'esigenza, in questo modo possono esistere più attributi di tipo data nello stesso elemento. Il valore dell'attributo è richiamabile in Javascript tramite l'id dell'elemento seguito da dataset e poi dal nome dell'attributo scritto con una particolare notazione come mostrato nel codice seguente:
<img id="banner" class="banner" data-banner-size-type="largo" data-banner-lang="italiano" />
<script>
var banner_id = document.getElementById("banner");
alert("Il banner è di tipo " + banner_id.dataset.bannerSizeType + " e con contenuto in " + banner_id.dataset.bannerLang + ".");
</script>- spellcheck: per comunicare al browser, per le parti di codice modificabili lato utente, di utilizzare il proprio correttore di sintassi sull'elemento in cui è presente e su tutti gli elementi al suo interno.
Di attributi globali ce ne sono altri oltre ai nuovi già menzionati ed a quelli come il già citato id, così come style, title, class, hidden, ecc... che provengono dalle specifiche precedenti ma è bene presentarli nel momento in cui diventa necessario il loro impiego per la spiegazione di utilizzi e funzionalità proprie.
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento