This article is currently in the process of being translated into Italian (~99% done).
Your First Webpage
Ecco un esempio di documento in HTML5, uno dei più semplici che tu possa creare. Inizia con il doctype HTML5, seguito dal titolo della pagina e seguito da alcuni contenuti. In questo caso un singolo paragrafo.
<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>Dovresti avere un'idea di come apparirà in un browser: il titolo (title) del documento, "Your first HMTL5 Document" ed il testo "Okay, now we're going somewhere!" nella zona in alto a sinistra della pagina.
La dichiarazione doctype indica a chi legge il documento che il contenuto successivo è in HTML.
<!DOCTYPE html>Se hai già avuto modo di guardare il markup dei documenti HTML, ti sarà capitato di vedere una dichiarazione doctype molto simile a questa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Persino i webdeveloper professionisti copiano e incollano questo lungo doctype da un documento ad un altro. Il nuovo doctype è invece più semplice e facile da ricordare. Poiché non viene dichiarato alcuna versione specifica, tutte le nuove funzionalità future saranno in automatico disponibili per la tua pagina.
A cosa serve il DOCTYPE?
Ma perché c'è un doctype? Tutti i browser hanno due diversi modi di leggere il documento: la modalità standard e la modalità quirks. Se non specifichi che tipo di documento dovranno gestire, la modalità sarà quirks. Pensa a tutto questo un po' come al vecchio metodo di leggere il tuo documento: potrebbero esserci alcuni errori e potrai essere sicuro che non tutti i browser riusciranno a leggerlo nello stesso modo. Dichiarare un doctype costringe invece i browser a passare alla modalità standard, ovvero il "nuovo" metodo per leggere il documento. Se userai la modalità standard, la maggior parte dei browser leggerà la pagina nello stesso modo e capirà senza dubbio che cosa stai scrivendo.
Per rendere più comprensibile un documento HTML5, è consigliabile usare i due elementi di sezione <head> e <body>. Usando queste sezioni, separerai con chiarezza le informazioni sulla tua pagina (head) dal contenuto reale (body). Se li userai, la tua pagina web sarà simile a questa:
<!DOCTYPE html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>Ti stai chiedendo che cosa potrebbe succedere con il rientro? Andare a capo oppure no è una tua libera scelta, ma in questo modo visualizzerai la struttura della pagina e sarà più semplice fare una lettura a colpo d'occhio.
L'ultima cosa che vorrai aggiungere è l'elemento <html> e viene posizionato subito dopo la dichiarazione doctype.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>
</html>Congratulazioni, hai appena creato la tua prima pagina web HTML5! Hai notato che l'elemento <p> si trova all'interno dell'elemento <body>? Questo costrutto è chiamato elemento di nidificazione e rappresenta una parte essenziale della struttura HTML. Per adesso lo metterò in pausa, ma volevo solo darti un'idea degli elementi di nidificazione.
Cosa hai imparato
- Dichiara sempre il doctype - <!DOCTYPE html>
- Utilizza l'elemento <head> per separare le informazioni che riguardano la tua pagina
- Usa l'elemento <body> per separare il contenuto della tua pagina
- Usare <html>, <head>, e <body> è solo una questione di stile nell'HTML5, ma la struttura della pagina ti sarà più chiara
- Mandare a capo il tuo markup facilita la comprensione
- Puoi nidificare un elemento all'interno di un altro
