Engadindo etiquetas HTML

Como escoitar correctamente as etiquetas HTML

Se ollades o marque HTML para calquera páxina web hoxe, verá os elementos HTML contidos noutros elementos HTML. Estes elementos que están "dentro" doutros son os que se denominan "elementos aniñados" e que son esenciais para a creación de calquera páxina web hoxe.

¿Que significa nesta etiqueta HTML?

A forma máis sinxela de comprender a anidación é pensar en etiquetas HTML como caixas que conteñen o contido. O seu contido pode incluír texto, imaxes, etc. As etiquetas HTML son as caixas ao redor do contido. Ás veces, cómpre colocar cadros dentro doutras caixas. Estas caixas "internas" están aniñadas dentro doutras.

Se ten un bloque de texto que desexa en negra dentro dun parágrafo, terá dous elementos HTML así como o texto en si.

Exemplo: Esta é unha frase de texto.

Ese texto é o que imos usar como exemplo. Velaquí como estaría escrito.

Exemplo: Esta é unha frase de texto.

Porque quere que a palabra "oración" sexa en negra, engade a apertura e pechando etiquetas audaces antes e despois dese período.

Exemplo: Esta é unha sentenza do texto.

Como podes ver, temos unha caixa (o parágrafo) que contén o contido / texto da nosa oración, máis unha segunda caixa (o par forte etiqueta), que fará que esa palabra sexa en negra.

Cando rexistras as etiquetas, é de vital importancia que peches as etiquetas na orde oposto que abrías. Abre primeiro o

, seguido do , o que significa que inverte e pecha o e despois o .

Outra forma de pensar nisto é volver a usar a analoxía das caixas. Se coloque unha caixa dentro doutra caixa, ten que pechar o interior antes de que poida pechar a caixa externa ou que contén.

Engadindo máis etiquetas aniñadas

E se só quere que unha ou dúas palabras sexan en negra e outro conxunto para ser cursiva? Vexa como facelo.

Exemplo: Esta é unha sentenza de texto e tamén ten algúns texto en cursiva tamén.

Podes ver que a nosa caixa externa, o

, agora ten dúas etiquetas aniñadas no seu interior: a ea . Deberán estar pechadas antes de que se poida pechar a caixa que contén.

Exemplo: Esta é unha sentenza de texto e tamén ten texto en cursiva tamén.

Este é outro parágrafo. < / p>

Neste caso temos caixas dentro de caixas. O cadro máis importante é a

ou unha "división". Dentro desta caixa hai un par de etiquetas de parágrafo aniñadas e dentro do primeiro parágrafo temos un seguinte par de etiquetas e . Unha vez máis, mire hoxe calquera páxina web e verá isto e moito máis anidando a suceder. Así é como se compoñen as páxinas - caixas dentro das caixas.

Por que debes preocuparte pola anidación?

O motivo número 1 polo que debes preocuparte pola anidación é se vas usar o CSS. As Follas de estilo en cascada dependen das etiquetas para que estean aniñadas constantemente dentro do documento para que poida indicar de onde comezan e terminan os estilos. Se configura un estilo que debería afectar a todas as "ligazóns que están dentro da división cunha clase de texto" contido principal "na páxina, a anidación incorrecta dificulta o navegador saber onde aplicar estes estilos. Vexamos algúns HTML:

Exemplo: Esta é unha sentenza de texto e tamén ten algúns texto en cursiva tamén.

Este é outro parágrafo .

Usando o exemplo que acabo de dicir, se eu quería escribir un estilo CSS que afectaría a ligazón dentro desta división, e só esa ligazón (a diferenza doutras ligazóns noutras seccións da páxina), necesitaría usar a ligazón anidando a escribir o meu estilo, como tal:

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

Outros motivos son a accesibilidade e a compatibilidade do navegador. Se o seu HTML está aniñado incorrectamente, non será tan accesible para os lectores de pantalla e os navegadores máis antigos - e podería incluso romper por completo o aspecto visual dunha páxina se os navegadores non poden descubrir como renderizar unha páxina correctamente porque os elementos e etiquetas HTML están fóra de lugar.

Finalmente, se se está esforzando por escribir HTML completamente correcto e válido, necesitará usar a anidación correcta. En caso contrario, cada validador marcará o seu HTML como incorrecto.