HTML utilizza due tipi di tag: tag accoppiati e tag singoli (auto-chiudenti). Ognuno svolge un ruolo diverso nella strutturazione di una pagina web.

Tag Accoppiati

I tag accoppiati hanno un tag di apertura e uno di chiusura. Racchiudono contenuti, raggruppano elementi e definiscono significato o struttura.

Sintassi:

<tag_name>Some content</tag_name>

Ecco un esempio reale di utilizzo dei tag accoppiati:

In questo esempio:

• <section>...</section>: raggruppa contenuti correlati;
• <h1>...</h1>: aggiunge un'intestazione per la sezione;
• <p>...</p>: contiene un paragrafo che spiega che la maggior parte dei tag HTML sono accoppiati.

Tag Singoli

I tag singoli non hanno un tag di chiusura. Sono utilizzati quando non è necessario alcun contenuto interno e tutto il comportamento è definito tramite attributi.

Sintassi:

<tag_name />

Ecco un esempio reale di utilizzo dei tag singoli:

Questo codice include due elementi:

• <input />: crea un campo di inserimento testo. L'attributo placeholder=" name" mostra un suggerimento all'interno della casella;
• <img />: visualizza un'immagine di frutta.
  • alt="Fruits": testo mostrato se l'immagine non viene caricata;
  • width e height: impostano le dimensioni dell'immagine;
  • src: specifica l'URL dell'immagine.

Annidamento dei tag

I tag devono essere annidati correttamente, come le matrioske, con ogni tag di chiusura che corrisponde al rispettivo tag di apertura nell'ordine corretto.

Ecco un esempio di tag annidati:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Consideriamo il seguente esempio valido:

Questo codice visualizza un paragrafo con un link e testo enfatizzato:

• <p>...</p>: racchiude l'intero paragrafo;
• <a href="https://privacy.com">...</a>: crea un collegamento cliccabile alla Privacy Policy;
• <strong>...</strong>: rende la parola "website" in grassetto per enfatizzarla.