L'annidamento dei tag in Html

Cos'è l'annidamento dei tag in Html

L'annidamento dei tag nel linguaggio HTML è la possibilità di realizzare una combinazione di effetti ipertestuali mediante l'utilizzo di tag HTML diversi.

Nei linguaggi di markup, come l'HTML, i tag sono composti da un tag di apertura e un tag di chiusura e l'effetto viene applicato sul testo compreso tra i due tag HTML.

Un esempio pratico

Ad esempio, volendo realizzare in grassetto la parola "annidamento tag" scriveremo la parola tra il tag di apertura <b> e il tag di chiusura </b> come nel seguente codice sorgente HTML:

Cosa è l'<b>annidamento tag</b>?

Quando il browser visualizza il codice sorgente attribuisce alla parola "annidamento tag" una formattazione in grassetto ( tag b ) visualizzando in output sullo schermo dell'utente la seguente scritta.

Cosa è l'annidamento tag?

Supponiamo, ora, di voler sottolineare la parola "annidamento tag" ( tag u ) senza però togliere il grassetto. Per farlo sarà sufficiente inserire tra i tag di apertura <u> e di chiusura </u> l'intero codice HTML della parola ivi compresi i tag b.

Cosa è l'<u><b>annidamento tag</b></u>?

In quest'ultimo caso l'effetto finale sul browser dell'utente è la combinazione del tag <b> ( grassetto ) e del tag <u> ( underscore ). Il browser visualizza in output la seguente scritta:

Cosa è l'annidamento tag?

Il tag <u> si comporta come un contenitore che aggiunge l'effetto della sottolineatura al testo senza eliminare tag grassetto. L'elemento più esterno contiene tutti gli altri elementi visibili del documento.

Questa funzionalità del linguaggio HTML viene comunemente detta annidamento dei tag e questi ultimi sono detti tag annidati.

Cosa accade se i tag sono in conflitto tra loro?

Può capitare che i tag annidati siano in contrasto tra loro. In questo caso, prevale sempre il tag più interno ossia quello più vicino al testo in quanto è l'ultimo ad essere interpretato dal browser.

Ad esempio, nel seguente codice sorgente c'è un conflitto. Ho racchiuso il titolo sia tra un header <H1> che <H2>. E' un esempio di tag annidati in conflitto tra loro. Quale dei due viene usato? H1 o H2?

<H1><H2>Titolo</h2></h1>

Il browser applica il formato H2 perché è quello più interno.

Un po' come quando si apre una scatola dentro l'altra... l'ultima scatola da aprire è sempre quella più interna.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Libri di approfondimento
  1. Il linguaggio Html