Corso di HTML / Struttura di base di un documento HTML

Un documento HTML inizia con una dichiarazione <!doctype html>, seguita dall'elemento radice html. All'interno di html, head contiene i metadati del documento, mentre body contiene il contenuto principale della pagina. Potete salvare l'esempio seguente come file HTML e aprirlo in un browser.

La forma base di un documento HTML

Iniziate osservando l'esempio completo. L'elemento esterno html contiene sia head che body.

<!doctype html>
<html lang="it-IT">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Il mio primo documento HTML</title>
  </head>
  <body>
    <h1>Ciao</h1>
    <p>Questo è il contenuto del documento.</p>
  </body>
</html>

L'indentazione facilita il riconoscimento degli elementi annidati all'interno di altri elementi. Il browser interpreta i tag per creare la struttura del documento; il titolo e il paragrafo all'interno di body costituiscono il contenuto che vedete principalmente sulla pagina.

Cosa fa ogni parte?

• <!doctype html>: Dichiara il documento come HTML. Non è un elemento HTML. Posizionarlo all'inizio aiuta il browser a utilizzare la modalità standard.
• <html lang="it-IT">: L'elemento radice del documento. lang="it-IT" indica l’italiano come lingua principale, il che aiuta strumenti come i lettori di schermo a scegliere la pronuncia corretta.
• <head>: Contiene metadati come il titolo del documento, la codifica dei caratteri e le impostazioni di visualizzazione. Il suo contenuto non appare completamente nel corpo della pagina.
• <body>: Contiene i contenuti principali della pagina, comprese intestazioni, paragrafi, immagini e link.

Lo standard HTML permette di omettere determinati tag di apertura e chiusura, ma scrivere esplicitamente html, head e body rende più facile comprendere la struttura quando si impara. Le descrizioni degli elementi del documento dello standard WHATWG HTML forniscono le definizioni dettagliate. Le regole per tag e attributi sono spiegate in Sintassi.

Tre impostazioni nell'head

La sezione head dell'esempio contiene tre impostazioni utili che dovrebbero essere riconosciute in un primo documento HTML. Confrontate le posizioni e le verifiche per ciascun elemento dei metadati in Impostare il titolo della pagina, la descrizione, la lingua e la codifica.

• meta charset="utf-8": Indica UTF-8 come codifica dei caratteri del documento. Salvare anche il file in UTF-8 in modo che i caratteri vengano visualizzati correttamente. Posizionare la dichiarazione di codifica vicino all'inizio del documento.
• meta name="viewport": Imposta la larghezza della finestra di visualizzazione sulla larghezza del dispositivo per i browser mobili. Questo tag da solo non rende un design responsive.
• title: Imposta il titolo del documento, che viene visualizzato in luoghi come la scheda del browser. Ha uno scopo diverso da un h1, che viene visualizzato nel corpo della pagina.

Notate la differenza tra title e h1 nell'esempio: la scheda del browser mostra "Il mio primo documento HTML", mentre il titolo visibile sulla pagina è "Ciao".

Salvare il file HTML e aprirlo nel browser

Usate il primo blocco di codice per creare un vero file e verificare il risultato. Avete bisogno solo di un semplice editor di testo e di un browser web; salvate il codice come testo semplice e non come documento formattato.

1. Create una cartella di lavoro, aprite un nuovo file in un editor di testo e incollate l'intero primo blocco di codice.
2. Salvate il file in questa cartella con il nome index.html. Se l'editor chiede una codifica, scegliete UTF-8. index.html è un nome comune per la prima pagina di un sito web, ma un altro nome di file che termina con .html funziona altrettanto bene per questo esercizio.
3. Fate doppio clic su index.html nel vostro file manager. Se si apre un'altra applicazione, usate "Apri con" per selezionare un browser web, oppure trascinate il file in una finestra del browser.
4. Verificate che la scheda del browser mostri "Il mio primo documento HTML" e che la pagina mostri "Ciao" sopra "Questo è il contenuto del documento." La barra degli indirizzi mostra un URL file:// per il file locale.
5. Modificate il testo all'interno di title e h1 nell'editor, salvate il file e aggiornate il browser. Confrontate il titolo della scheda aggiornato con il titolo sulla pagina.

Aprire un URL file:// legge un file sul vostro computer. Inviare questo URL a qualcun altro non gli concede l'accesso alla vostra copia; per condividere la pagina sul web, dovete caricare i suoi file su un server web o su un servizio di hosting.

Se il risultato non è quello che vi aspettavate

• Il browser mostra i tag come testo: Verificate se il nome effettivo del file termina con .txt, per esempio index.html.txt. Alcuni editor aggiungono questa estensione quando si salva un documento di testo. Se necessario, scegliete "Tutti i file" o l'equivalente nella finestra di salvataggio e salvate il file come index.html. Mostrare le estensioni dei file nel file manager vi aiuta a controllare il nome.
• Le vostre modifiche non vengono visualizzate: Salvate il file nell'editor e aggiornate il browser. Se più cartelle contengono un file con lo stesso nome, confrontate il percorso del file nel browser con la cartella in cui avete salvato le vostre modifiche.
• I caratteri vengono visualizzati in modo errato: Verificate se avete salvato il file in UTF-8 e se avete lasciato la dichiarazione <meta charset="utf-8"> nel documento.
• La pagina è vuota: Assicuratevi di aver aperto il file desiderato e che il titolo e il paragrafo siano ancora all'interno di body.

Per saperne di più sull'apertura e l'organizzazione dei file HTML locali, vedere la guida MDN alla gestione dei file.