Se guardi l'HTML markup per qualsiasi pagina web oggi, vedrai elementi HTML contenuti all'interno di altri elementi HTML. Questi elementi che sono "dentro" di altri elementi sono noti come elementi annidatie sono essenziali per creare qualsiasi pagina web oggi.
Cosa significa nidificare i tag HTML?
Il modo più semplice per capire l'annidamento è pensare a Tag HTML come scatole che contengono i tuoi contenuti. I tuoi contenuti possono includere testo, immagini e media correlati. I tag HTML sono le caselle attorno al contenuto. A volte, è necessario posizionare le scatole all'interno di altre scatole. Quelle scatole "interne" sono annidate all'interno di altre.
Se hai un blocco di testo che vuoi in grassetto all'interno di un paragrafo, ne avrai due Elementi HTML così come il testo stesso.
Esempio: questa è una frase di testo.
Quel testo è quello che useremo come esempio. Ecco come sarebbe scritto in HTML:
Esempio: questa è una frase di testo.
Per fare la parola frase grassetto, aggiungi tag di apertura e chiusura prima e dopo quella parola.
Esempio: questo è un frase di testo.
Come puoi vedere, abbiamo un riquadro (il paragrafo) che contiene il contenuto della frase, più un secondo riquadro (il forte coppia di tag), che rende quella parola in grassetto.
Quando annidi i tag, chiudi i tag nell'ordine opposto a quello in cui li hai aperti. tu apri il
prima, seguito da , il che significa che lo inverti e chiudi il e poi il.
Un altro modo per pensarci è usare ancora una volta l'analogia delle scatole. Se metti una scatola all'interno di un'altra scatola, devi chiudere quella interna prima di poter chiudere la scatola esterna o di contenimento.
Aggiunta di più tag nidificati
E se volessi essere solo una o due parole? grassetto, e un altro set per essere corsivo? Ecco come farlo.
Esempio: questo è un frase di testo e ha anche alcuni testo in corsivo pure.
Puoi vedere che la nostra scatola esterna, il
, ora ha due tag nidificati al suo interno: il e il . Devono essere entrambi chiusi prima di poter chiudere la scatola che li contiene.
Esempio: questo è un frase di testo e ha anche alcuni testo in corsivo pure.
Questo è un altro paragrafo.
In questo caso, abbiamo scatole all'interno di scatole! La scatola più esterna è la
o un. divisione. All'interno di quella scatola ci sono un paio di nidificati. tag di paragrafo, e all'interno del primo paragrafo, abbiamo un successivo. e coppia di tag.Perché dovresti preoccuparti della nidificazione?
Il motivo n. 1 per cui dovresti preoccuparti dell'annidamento è se utilizzerai i CSS. Fogli di stile fare affidamento sui tag per essere nidificati in modo coerente all'interno del documento in modo che possa dire dove iniziano e finiscono gli stili. L'annidamento errato rende difficile per il browser sapere dove applicare questi stili. Diamo un'occhiata a un po' di HTML:
Esempio: questo è un frase di testo e ha anche alcuni testo in corsivo pure.
Questo è un altro paragrafo.
Usando l'esempio sopra, se volessimo scrivere a Stile CSS che influenzerebbe il collegamento all'interno di questa divisione e solo quel collegamento (al contrario di qualsiasi altro collegamento in altre sezioni della pagina), avremmo bisogno di utilizzare l'annidamento per scrivere questo stile, in quanto tale:
.main-content a {
colore: #F00;
}
altre considerazioni
Anche l'accessibilità e la compatibilità del browser sono importanti. Se il tuo codice HTML è nidificato in modo errato, non sarà accessibile agli screen reader e ai browser meno recenti e potrebbe persino interrompere completamente il aspetto visivo di una pagina se i browser non riescono a capire come eseguire correttamente il rendering di una pagina perché gli elementi e i tag HTML sono fuori posto.
Infine, se stai cercando di scrivere un codice HTML completamente corretto e valido, dovrai utilizzare l'annidamento corretto. In caso contrario, ogni validatore contrassegnerà il tuo codice HTML come errato.