L’HTML 5 è ormai una realtà affermata, le attuali specifiche attendono solo gli ultimi commenti prima di essere dichiarate ufficiali e i browser già permettono un valido supporto che permette di iniziare ad utilizzare parte delle features offerte da questo linguaggio per i propri progetti.
Vediamo quindi come iniziare ad impostare una pagina in HTML 5 per un eventuale sito web.
Sintassi
Per creare il nostro primo file HTML è sufficiente definire un nuovo file testuale con estensione .html o .htm, al suo interno possiamo iniziare a definire la struttura della nostra pagina.
<html> <head></head> <body></body> </html>
L’HTML 5 come tutti i linguaggi di marcatura ipertestuale presenta una struttura base racchiusa nell’elemento <html> con all’interno i due elementi <head> e <body> per una corretta suddivisione tra informazioni e contenuto.
Il doctype
Una delle caratteristiche più importanti dell’HTML 5 è lo shorten doctype o doctype dtdless
<!doctype html>
Questo doctype privo di indicazioni sul dtd o sul linguaggio utilizzato, forza automaticamente il browser in modalità standard senza l’aggiunta di ulteriore codice.
Nonostante la sua semplicità vanta un ottimo supporto, non a caso è utilizzato da tempo sulla homepage di Google e da molti altri siti.
Gli attributi
Non vi sono grandi differenze negli attributi rispetto ad altre versioni dell’HTML. Per enunciare l’attributo è sufficiente utilizzare il nome seguito da un = e il valore. Nell’HTML 5 il valore dell’attributo può essere dichiarato a scelta senza apici, con apici singoli o apici doppi. Tuttavia il mio consiglio è quello di utilizzare sempre apici singoli o doppi per mantenere più ordinato il codice.
<html lang="it">
Dichiarazione del Charset
Per la dichiarazione del charset della pagina è possibile utilizzare la classica sintassi:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
o in alternativa una versione contratta altrettanto compatibile e funzionante
<meta charset="utf-8">
In ogni caso è sempre opportuno (se non doveroso) esplicitare un charset valido per la pagina, possibilmente un UTF-8 piuttosto dell’ISO (questo per ragioni che in effetti sarebbe opportuno trattare in un altro post 
).
CSS e JAVASCRIPT
Per il collegamento a risorse diverse dall’HTML, per esempio i javascript possiamo tranquillamente omettere l’attributo type.
<script> //script javascript interno </script>
anche nel caso di javascript interni alla pagina
<script src="js/javascriptesterno.js"></script>
Stesso discorso vale per i fogli stile con l’aggiunta di un attributo rel che diventa fondamentale nel caso si utilizzi il tag link.
<link href="css/fogliodistileesterno.css" rel="stylesheet">
Nel caso si utilizzi l’elemento style per definire fogli di stile interni, l’attributo rel non è necessario
<style> /*foglio di stile interno*/ </style>
Ed infine ecco il nostro file in HTML 5:
<!doctype html> <html lang="it"> <head> <meta charset="utf-8"> <title>La mia prima pagina in HTML 5</title> <link href="css/fogliodistileesterno.css" rel="stylesheet"> <style> /*foglio di stile interno*/ </style> <script src="js/javascriptesterno.js"></script> <script> //script javascript interno </script> </head> <body> </body> </html>
Nel caso voleste fare un test, potete provare a validare il codice nel validatore w3c per l’HTML 5. Il validatore è ancora sperimentale ma è basato sulle attuali specifiche disponibili.
E i nuovi tag? Canvas? Video?
C’è molto da dire sull’HTML 5, per questioni pratiche ho pensato di suddividere i vari argomenti in più post, nei prossimi articoli vedremo come verificare la compatibilità del browser con le varie features dell’HTML 5, i nuovi elementi messi a disposizione e il loro funzionamento, semantica del linguaggio e altro ancora.
Che dire… passate a trovarmi su howtoweb.it oppure controllate i feed rss per rimanere aggiornati sugli ultimi post.
Alla prossima!
siete fortissimi
queste lezioni sono molto interessanti e chiare