HTML5

HTML5

Introduzione


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>

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:

Ci sono poi dei comandi "tipografici", che non hanno una funzione semantica:

Oltre a questi, ci sono dei comandi specifici per inserire istruzioni e parti di codice:


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).