Cómo anidar etiquetas html correctamente

3.5
(6)

Publicado

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 editor de texto que uséis minimizaréis mucho este error.

Cómo anidar etiquetas html correctamente 1

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 3.5 / 5. Votos: 6

Todavía no hay votos. Sé el primero en valorar la entrada.

  1. Avatar de Saúl Triviño

    Hola Francesc,
    Una duda sobre anidamientos de elementos en línea.

    ¿Qué es más correcto al anidar una negrita y un enlace?


    ¿Cuáles serían las diferencias entre una u otra forma?
    ¿Dependería de si el enlace solo fuese una parte de la negrita o si el enlace ocupase exactamente el mismo tamaño de la negrita?

    Muchas gracias.
    Un saludo.

    1. Avatar de Francesc Ricart

      Hola Saúl,

      Las dos opciones son sintácticamente correctas.

      a) <a href=""><strong>Texto encapsulado</strong></a>
      b) <strong><a href="">Texto encapsulado</a></strong>

      Mi opinión subjetiva es que el primer caso (a) tiene más sentido. No se me ocurre ninguna razón por la que estuviera mal la opción (b). Si alguien opina lo contrario lo animo a aportar algo de luz.

  2. Avatar de charly
    charly

    Muchas gracias, retome el desarrollo web y tus post son el mejor repaso. RAPIDO Y SENCILLO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *