Questa è la struttura essenziale di una pagina HTML5:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Titolo della pagina</title>
</head>
<body>
<p>Qui viene inserito il testo che apparirà nella pagina.</p>
</body>
</html>
- La prima riga deve obbligatoriamente contenere la dichiarazione <!DOCTYPE html> che informa il browser che si tratta di un documento HTML5.
- Attraverso il comando <html lang="it"> si specifica la lingua utilizzata nella pagina. Pur non essendo obbligatorio, è consigliabile farlo per migliorare l'accessibilità e la ricerca.
- Il comando <head> contiene informazioni che non vengono visualizzate direttamente nella pagina, ma che sono utili per il browser e i motori di ricerca.
- Il comando <meta charset="utf-8" /> specifica la codifica dei caratteri utilizzata nella pagina. È importante includerlo per garantire che i caratteri speciali vengano visualizzati correttamente.
- Il comando <title> definisce il titolo della pagina, che viene visualizzato nella barra del titolo del browser e nei risultati dei motori di ricerca.
- Il comando <body> contiene il corpo della pagina, ovvero il testo, le immagini, i link e altri elementi che verranno visualizzati dagli utenti.
Suggerimento: utilizzando Visual Studio Code, quando in un documento HTML vuoto si inizia a scrivere "html" apparirà un breve elenco a tendina. Se qui si sceglie html:5 verrà inserito automaticamente questo codice, che è un ottimo punto di partenza per creare una nuova pagina HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<meta name="viewport" content="width=device‐width, initial‐scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
I vari testi della pagina vanno inseriti in contenitori. Ci sono diversi tipi di contenitori che si presentano in modo diverso e che aiutano a dare anche un valore semantico al contenuto. Il contenitore basilare ê il paragrafo, che inizia con il tag <p> e termina con </p>.
Suggerimento: utilizzando Visual Studio Code, se si inizia a scrivere "lorem" seguito da TAB, si va ad inserire un testo dimostrativo utile a fare delle prove di formattazione:
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Laboriosam illum, voluptatum amet
cumque quo similique explicabo
magnam soluta earum culpa,
illo voluptates,
tempora nobis nam
molestias.
Quisquam accusamus at incidunt!
Altri contenitori molto comuni sono quelli che utilizzano i tag <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Questi servono a creare titoli, sottotitoli e nomi di sezioni nella pagina ed hanno tipicamente dimensioni vieppiù. decrescenti:
Questo è un titolo h1
Questo è un titolo h2
Questo è un titolo h3
Questo è un titolo h4
Questo è un titolo h5
Questo è un titolo h6
Nota: è buona norma che in una pagina HTML sia presente un solo tag h1 per il titolo principale, mentre non c'è un linite al numero di sottotitoli e nomi di sezioni.
Per migliorare la leggibilità e l'accessibilità della pagina, è consigliabile suddividere il testo in paragrafi che inizieranno con <p> e si concluderanno con </p>. All'interno del testo, è possibile utilizzare vari altri comandi per formattare il contenuto:
- <strong> viene utilizzato per un contenuto importante
- <em> viene utilizzato per enfatizzare un contenuto
- <mark> viene utilizzato per evidenziare una parte del testo
- <small> viene utilizzato per una nota o un testo secondario
- <cite> viene utilizzato per inserire il titolo di un'opera citata
- <q> viene utilizzato per
inserire una citazione
- <abbr> viene utilizzato per un'abbreviazione (da usare con <title>)
- <dfn> viene utilizzato per inserire una definizione
- <time datetime="2023-04-15"> viene utilizzato per inserire una data e/o un orario, come ad esempio
Ci sono poi dei comandi "tipografici", che non hanno una funzione semantica:
- <b> viene utilizzato per un testo in grassetto
- <i> viene utilizzato per un testo in corsivo
- <u> viene utilizzato per un testo sottolineato
- <sup> viene utilizzato per un testo in apice
- <sub> viene utilizzato per un testo in pedice
- <del> viene utilizzato per un
testo cancellato - <ins> viene utilizzato per un testo inserito
- <br /> viene utilizzato per inserire un'interruzione forzata di riga
Oltre a questi, ci sono dei comandi specifici per inserire istruzioni e parti di codice:
- <code> viene utilizzato per inserire del
codice di programmazione - <samp> viene utilizzato per inserire l'output di un programma
- <kbd> viene utilizzato per indicare l'input da tastiera
- <var> viene utilizzato per indicare una variabile
- <data value="1080"> viene utilizzato per inserire un dato leggibile da una macchina, 1080 in questo caso
-
<pre> viene utilizzato per inserire del testo preformattato, come ad esempio:
Questo è un testo preformattato. Mantiene gli spazi e le interruzioni di linea.
Ulteriori informazioni
Per un elenco completo dei tag HTML5, consulta la documentazione ufficiale HTML Living Standard sul sito WHATWG (molto tecnica) oppure gli elenchi HTML Element Reference sul sito W3Schools (molto più semplice).