In HTML, ci sono sia tag accoppiati che tag singoli (noti anche come tag auto-chiudenti o elementi vuoti). Ogni tipo serve a uno scopo specifico e ha la sua funzione.

Tag Accoppiati

I tag accoppiati consistono in tag di apertura e chiusura. Possono avvolgere il contenuto e raggruppare elementi per cambiare alcune proprietà o raccogliere elementi per significato.

Sintassi:

<tag_name>Some content</tag_name>

Ecco un esempio reale di utilizzo dei tag accoppiati:

In questo esempio:

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

Tag Singoli

Tag singoli consistono solo di un tag di apertura e nessun tag di chiusura. Sono utilizzati quando il tag non richiede contenuto o quando tutto il contenuto e il comportamento sono specificati utilizzando gli attributi.

Sintassi:

<tag_name />

Ecco un esempio reale di utilizzo dei tag singoli:

Questo codice include due elementi:

• <input />: crea un campo di input di testo. Il 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

Quando si annidano i tag, è essenziale seguire l'ordine gerarchico, simile alle bambole russe. Ogni tag annidato dovrebbe essere racchiuso correttamente all'interno del suo tag genitore, rispettando comunque le regole della sintassi HTML.

Ecco un esempio di tag annidati:

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

Consideriamo il prossimo 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 link cliccabile alla Privacy Policy;
• <strong>...</strong>: rende la parola "website" in grassetto per enfatizzarla.

Riepilogo

HTML consiste in tag accoppiati e singoli, ciascuno con scopi diversi. I tag accoppiati hanno un tag di apertura e uno di chiusura per racchiudere il contenuto, mentre i tag singoli si chiudono da soli. Annidare correttamente i tag e seguire la gerarchia corretta sono essenziali per una struttura HTML ben formata.