Lezioni di HTML 5 Lezione 1 – Impostare il file HTML

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!

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial. Contrassegna il permalink.

2 risposte a Lezioni di HTML 5 Lezione 1 – Impostare il file HTML

  1. maurizio scrive:

    siete fortissimi

  2. Luigi Milanese scrive:

    queste lezioni sono molto interessanti e chiare

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>