W3docs
it
Accedi

Tag HTML di base

Impara i tag HTML fondamentali: intestazioni, paragrafi, immagini, link, pulsanti, liste e linee orizzontali, con esempi eseguibili.

HTML è un linguaggio di markup: si racchiude il contenuto in tag (elementi) che indicano al browser cosa significa ciascuna parte — questo è un'intestazione, quello è un paragrafo, questo è un link. Senza markup, un browser vedrebbe solo un muro di testo privo di struttura. Comprendere i tag di base è il fondamento di tutto il resto in HTML.

Ecco gli elementi che utilizzerai più spesso in quasi ogni pagina:

Questa pagina introduce ciascuno di essi, spiega perché sono necessari e fornisce un esempio eseguibile che puoi modificare.

Documenti HTML

Ogni pagina HTML condivide lo stesso scheletro boilerplate. Gli elementi elencati di seguito compaiono in tutti gli esempi di questa pagina, quindi vale la pena sapere cosa fa ciascuno:

  • <!DOCTYPE html> deve essere la primissima riga. Non è un tag ma una dichiarazione che indica al browser di utilizzare la modalità standard moderna (HTML5). Se viene omessa, i browser ricorrono a una vecchia "modalità quirks" che visualizza le pagine in modo incoerente.
  • L'intero documento è racchiuso nell'elemento <html>: inizia con <html> e termina con </html>. Questo è l'elemento radice.
  • La sezione <head> contiene informazioni sulla pagina che non vengono mostrate nel corpo — ad esempio, il <title>, che imposta il testo visualizzato nella scheda del browser e utilizzato dai motori di ricerca.
  • Il contenuto visibile della pagina si trova tra <body> e </body>. Tutto ciò che l'utente vede — intestazioni, paragrafi, immagini, link — va qui.

Esempio di documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Provalo tu stesso »

Intestazioni HTML

Le intestazioni forniscono a una pagina la sua struttura. Esistono sei livelli di intestazioni HTML, da <h1> (la più importante) fino a <h6> (la meno importante). Usa <h1> per il titolo principale della pagina, <h2> per le sezioni principali, <h3> per le sottosezioni e così via — come un indice.

Le intestazioni non sono semplice testo più grande e in grassetto. I loro livelli trasmettono un significato importante per l'accessibilità e la SEO: gli utenti che utilizzano screen reader navigano in una pagina saltando tra le intestazioni, e i motori di ricerca usano la struttura delle intestazioni per capire di cosa tratta la pagina. Per questo motivo, scegli un livello di intestazione per il suo significato, non per le sue dimensioni — non saltare mai i livelli solo per rendere il testo più piccolo.

Esempio delle intestazioni HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Provalo tu stesso »

Paragrafi HTML

L'elemento <p> raggruppa il testo in paragrafi. I browser aggiungono automaticamente spazio sopra e sotto ogni paragrafo, quindi non è necessario aggiungere righe vuote manualmente — in realtà, gli spazi e le interruzioni di riga in eccesso nel codice sorgente vengono compressi in un singolo spazio. Racchiudere il testo in <p> è il modo in cui si dice al browser "questo è un blocco di testo continuo."

Esempio dei paragrafi HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Provalo tu stesso »

Immagini HTML

Il tag <img> incorpora un'immagine nella pagina. È un elemento vuoto (senza tag di chiusura) e viene controllato interamente dai suoi attributi:

  • src — il percorso o URL del file immagine da visualizzare. Senza di esso, non appare nulla.
  • alt — il testo alternativo (vedi sotto).
  • width / height — le dimensioni dell'immagine in pixel. Impostarle riserva lo spazio affinché il layout non salti mentre l'immagine si carica.

Perché l'attributo alt è importante

L'attributo alt contiene una breve descrizione testuale dell'immagine. È obbligatorio perché serve a diversi scopi importanti:

  • Gli screen reader leggono il testo alt ad alta voce, così le persone che non possono vedere l'immagine la capiscono comunque — questo è essenziale per l'accessibilità.
  • Se l'immagine non riesce a caricarsi, il browser mostra il testo alt al suo posto.
  • I motori di ricerca lo utilizzano per capire cosa raffigura l'immagine.

Un buon testo alt descrive il contenuto o lo scopo dell'immagine in poche parole, come se la si stesse descrivendo a qualcuno per telefono. Ad esempio, invece di alt="Aleq" (che non significa nulla per chi non sa già cosa sia "Aleq"), preferisci qualcosa come alt="Ritratto di un uomo sorridente con gli occhiali". Se un'immagine è puramente decorativa e non aggiunge alcuna informazione, usa un alt="" vuoto in modo che gli screen reader la saltino.

Esempio delle immagini HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Provalo tu stesso »

I link sono ciò che trasforma pagine separate in un web connesso — consentono agli utenti di passare da una pagina all'altra con un clic. Si crea un link con il tag <a> (ancora) e lo si avvolge attorno al testo o all'immagine che deve essere cliccabile.

La destinazione è impostata con l'attributo href (abbreviazione di hypertext reference). È l'indirizzo al quale il browser naviga quando viene cliccato il link — un URL assoluto come https://www.w3docs.com/, oppure un percorso nel proprio sito come /learn-html/html-links. Senza href, un elemento <a> è solo testo e non fa nulla.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Provalo tu stesso »

Pulsanti HTML

Il tag <button> crea un pulsante cliccabile che gli utenti possono premere per attivare un'azione — inviare un modulo, aprire un menu o eseguire del JavaScript.

Un pulsante ha un attributo type. Impostare type="button" è una buona abitudine quando il pulsante non è destinato a inviare un modulo: per impostazione predefinita, un <button> all'interno di un <form> ha type="submit", quindi omettere il tipo può causare l'invio inaspettato del modulo (e il ricaricamento della pagina). Usando type="button" il pulsante non fa nulla da solo finché non gli si associa un comportamento, il che previene quell'invio accidentale.

Esempio del tag HTML <button>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Provalo tu stesso »

Liste HTML

Le liste raggruppano elementi correlati. Usa il tag <ul> per un elenco non ordinato (elementi puntati, dove l'ordine non è importante) o il tag <ol> per un elenco ordinato (elementi numerati, dove la sequenza è importante, come i passaggi di una ricetta). All'interno di entrambi, ogni elemento è racchiuso in un tag <li> (elemento di lista).

Esempio delle liste HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Provalo tu stesso »

Linee orizzontali HTML

Il tag HTML <hr> rappresenta una interruzione tematica tra contenuti a livello di paragrafo — ad esempio, un cambio verso un nuovo argomento all'interno di una sezione, o un cambio di scena in una storia. In HTML5 è un elemento semantico, non solo una linea decorativa: comunica che il contenuto prima e dopo di esso riguarda cose diverse. I browser lo visualizzano solitamente come una linea orizzontale, ma questa è solo la sua apparenza predefinita. È un tag vuoto, quindi non ha tag di chiusura.

Esempio del tag HTML <hr>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Provalo tu stesso »

Esercitazione

Pratica
Quali affermazioni sugli elementi HTML di base sono vere?
Quali affermazioni sugli elementi HTML di base sono vere?

I tag HTML di base presentati qui sono i mattoni di quasi ogni pagina web:

Was this page helpful?