S'estan incloent etiquetes HTML

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.

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 de text.

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 i després el .

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 de text i també té text en cursiva massa.

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 del text i també té text en cursiva massa.

Aquest és un altre paràgraf. < / p>

En aquest cas tenim caixes dins de caixes. El quadre més destacat és la

o una "divisió". Dins d'aquest requadre hi ha un parell d'etiquetes de paràgraf aniuades i, dins del primer paràgraf, tenim un paquet i següent. Una vegada més, consulteu qualsevol pàgina web avui i veurà això i molt més de passar per la nidificació. Així es construeixen les pàgines: quadres dins de caixes.

Per què hauria de preocupar-se per l'anidació?

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 de text i també té text en cursiva massa.

Aquest és un altre paràgraf .

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:

.main-content a {color: # F00; }

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.