Se osservi il markup HTML per qualsiasi pagina web oggi, vedrai elementi HTML contenuti in altri elementi HTML. Questi elementi che sono "dentro" gli altri sono quelli che sono conosciuti come "elementi annidati" e sono essenziali per costruire qualsiasi pagina web oggi.
Che cosa significa annidare i tag HTML?
Il modo più semplice per comprendere il nesting è pensare ai tag HTML come a scatole che contengono i tuoi contenuti. I tuoi contenuti possono includere testo, immagini, ecc. I tag HTML sono le caselle attorno al contenuto. A volte, è necessario posizionare le scatole all'interno di altre caselle. Quelle scatole "interne" sono annidate all'interno di altre.
Se hai un blocco di testo che desideri in grassetto all'interno di un paragrafo, avrai due elementi HTML e il testo stesso.
Esempio: questo è un condanna, frase di testo.
Quel testo è ciò che useremo come esempio. Ecco come sarebbe scritto.
Esempio: questa è una frase di testo. Poiché desideri che la parola "frase" sia in grassetto, aggiungi e apri i tag in grassetto prima e dopo quella parola.
Esempio: questo è un condanna, frase di testo. Come puoi vedere, abbiamo una casella (il paragrafo) che contiene il contenuto / testo della nostra frase, più una seconda casella (la coppia di tag forti), che renderà quella parola come grassetto. Quando si annidano i tag, è di fondamentale importanza chiudere i tag nell'ordine opposto in cui li si è aperti. Apri il prima, seguito dal , il che significa che lo si inverte e si chiude il e poi il Un altro modo di pensare a questo è di usare ancora una volta l'analogia delle scatole. Se metti una scatola in un'altra scatola, devi chiudere quella interna prima di poter chiudere la scatola esterna o contenente. Cosa succede se vuoi che una o due parole siano in grassetto e che un'altra sia in corsivo? Ecco come farlo. Esempio: questo è un condanna, frase di testo e ne ha anche alcuni testo in corsivo pure. Potete vedere che la nostra scatola esterna, il , ora ha due tag nidificati al suo interno - il e il . Devono essere entrambi chiusi prima che la scatola contenente possa essere chiusa. Esempio: questo è un condanna, frase di testo e ne ha anche alcuni testo in corsivo pure. Questo è un altro paragrafo. In questo caso abbiamo scatole dentro scatole! La scatola più fuori è il Il motivo numero uno che ti dovrebbe interessare è quello di utilizzare CSS. I fogli di stile CSS si basano sui tag per essere costantemente annidati all'interno del documento in modo che possa dire dove iniziano e finiscono gli stili. Se si imposta uno stile che dovrebbe interessare tutti i "collegamenti all'interno della divisione con una classe di testo" contenuto principale "nella pagina, l'annidamento errato rende difficile per il browser sapere dove applicare questi stili. Diamo un'occhiata ad alcuni HTML: Esempio: questo è un condanna, frase di testo e ne ha anche alcuni testo in corsivo pure. Questo è un altro paragrafo. Usando l'esempio che ho appena detto, se volessi scrivere uno stile CSS che avrebbe un impatto sul link all'interno di questa divisione, e solo quel link (al contrario di qualsiasi altro link in altre sezioni della pagina), avrei bisogno di usare il nidificare per scrivere il mio stile, in quanto tale: .main-content a { colore: # F00;}
Altri motivi includono l'accessibilità e la compatibilità del browser. Se il tuo codice HTML è annidato in modo errato, non sarà così accessibile agli screen reader e ai browser più vecchi e potrebbe persino interrompere completamente l'aspetto visivo di una pagina se i browser non riescono a capire come eseguire correttamente il rendering di una pagina perché elementi e tag HTML sono fuori posto Infine, se ti stai sforzando di scrivere HTML completamente corretto e valido, dovrai utilizzare l'annidamento corretto. Altrimenti, ogni validatore contrassegnerà il tuo HTML come errato. Aggiunta di più tag nidificati
Perché dovresti preoccuparti di Nesting
