Como anidar etiquetas html correctamente

Como anidar etiquetas html correctamente

Print Friendly, PDF & Email
Como anidar etiquetas html correctamente
5 (100%) 1 voto[s]

El significado de anidar es según la RAE hallarse o existir en alguien o algo.

Exactamente esto es lo que hacemos cuando escribimos html: anidar etiquetas.

Por ejemplo si vamos al caso más exagerado de todos cualquier etiqueta se encuentra dentro de <html></html>.

Pero vayamos a algo más habitual.

¿Cómo se anida exactamente una etiqueta dentro de otra?

Diferencia entre etiquetas anidadas y no anidadas.

En la imagen a continuación las etiquetas <strong> y <em> se encuentran dentro de <p>.

La etiqueta <em> se encuentra anidada dentro de <strong>.

etiquetas anidadas
La etiqueta em está anidada dentro de strong

En la imagen posterior las etiquetas <strong> y <em> se encuentran dentro de <p>.

Pero la etiqueta <strong> no se encuentra anidada dentro de <em>.

etiquetas dentro de un párrafo
La etiqueta em no está anidada dentro de strong

La norma que debemos seguir es que la última etiqueta en abrirse es la primera en cerrarse.

Errores típicos

En todas las formaciones de web, el error que se lleva el primer premio es el de anidar erróneamente una lista.

Os recomiendo leer esta entrada dónde se muestra como hacerlo.

En segundo lugar el error típico es olvidarse de cerrar etiquetas.

Otro error frecuente es directamente no respetar el orden de cierre de etiquetas.

Si tabuláis correctamente vuestro código html en el brackets, atom, sublime o editor de texto que uséis minimizaréis mucho este error.

¡Hola!

Querido lector,

En el caso de anidar etiquetas una imagen dice más que mil palabras. ¡Espero que os resulten útiles estos apuntes de clase!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.