Com esborrar correctament les etiquetes HTML
Si observeu el marcat HTML per a qualsevol pàgina web d'avui, veureu elements HTML inclosos en altres elements HTML. Aquests elements que són "dins" d'altres són els anomenats "elements niats", i són essencials per a la construcció de qualsevol pàgina web d'avui.
Què significa que heu etiquetat les etiquetes HTML?
La manera més fàcil d'entendre l'anidament és pensar en etiquetes HTML com a caixes que contenen el vostre contingut. El vostre contingut pot incloure text, imatges, etc. Les etiquetes HTML són les caselles al voltant del contingut. De vegades, heu de col·locar caixes dins d'altres caixes. Aquestes caixes "internes" estan amagades dins d'altres.
Si teniu un bloc de text que voleu que es mostri en negreta dins d'un paràgraf, tindreu dos elements HTML , així com el text en si.
Exemple: aquesta és una frase de text.Aquest text és el que utilitzarem com a exemple. Així és com estaria escrit.
Exemple: aquesta és una frase de text. p>
Com que voleu que la paraula "sentència" sigui en negreta, afegiu l'obertura i tancament d'etiquetes audaces abans i després d'aquest període.
Exemple: aquesta és una frase strong> de text. p>
Com podeu veure, tenim una casella (el paràgraf) que conté el contingut / text de la nostra oració, a més d'una segona casella (el parell de marques fortes), que farà que aquesta paraula sigui en negreta.
Quan etiquetes niu, és molt important que tanqueu les etiquetes en l'ordre contrari que les vau obrir. Obriu el
primer, seguit del , que significa que inverteu-lo i tanqueu-lo strong> i després el p>.
Una altra forma de pensar sobre això és tornar a fer servir l'analogia de les caixes. Si col·loqueu una caixa dins d'una altra casella, heu de tancar l'interior abans de tancar el quadre exterior o contenidor.
S'estan afegint més etiquetes niades
Què passa si només voleu que una o dues paraules siguin en negreta i un altre que sigui cursiva? A continuació s'explica com fer-ho.
Exemple: aquesta és una frase strong> de text i també té text en cursiva em> massa. p> Podeu veure que la nostra caixa externa, , ara té dues etiquetes niades al seu interior: el i el . Han d'estar tancats abans que es pugui tancar la caixa que conté. Exemple: aquesta és una frase strong> del text i també té text en cursiva em> massa. p> Aquest és un altre paràgraf. < / p> div> En aquest cas tenim caixes dins de caixes. El quadre més destacat és la La raó número u que us haureu de preocupar de nidificar és si usareu CSS. Les fulles d'estil en cascada es basen en etiquetes que s'indiquen constantment dins del document de manera que es pugui explicar on comencen i finalitzen els estils. Si configureu un estil que afecti tots els "enllaços que hi ha dins de la divisió amb una classe de text" contingut principal "a la pàgina, l'anàlisi incorrecte dificulta que el navegador sàpiga on aplicar aquests estils. Vegem alguns HTML: Exemple: aquesta és una frase strong> de text i també té text en cursiva em> massa. p> Aquest és un altre paràgraf . P> div> Usant l'exemple que acabem d'esmentar, si volgués escriure un estil CSS que impactaria l'enllaç dins d'aquesta divisió, i només aquest enllaç (a diferència de qualsevol altre enllaç en altres seccions de la pàgina), hauria d'utilitzar el nidant per escriure el meu estil, com a tal: Altres motius són l'accessibilitat i la compatibilitat del navegador. Si el vostre codi HTML està incorrectament aniat, no serà tan accessible per als lectors de pantalla i els navegadors antics, i fins i tot podria trencar per complet l'aparença visual d'una pàgina si els navegadors no poden esbrinar com renderitzar correctament una pàgina perquè els elements HTML i les etiquetes estan fora de lloc. Finalment, si s'esforça per escriure un codi HTML completament correcte i vàlid, haureu d'utilitzar la nidificació correcta. En cas contrari, cada validador indicarà que el vostre HTML és incorrecte. Per què hauria de preocupar-se per l'anidació?