Anidado

Los elementos pueden contener a otros elementos. Eso se llama anidado y es la base de cómo HTML construye estructura.

Cuando un elemento está dentro de otro, decimos que es un elemento hijo. El que lo contiene es el elemento padre. Un padre puede tener muchos hijos, y esos hijos pueden tener sus propios hijos — así se forma un árbol de contenido.

<!-- <strong> es hijo de <p> -->
<p>Este texto es <strong>muy importante</strong> para entender.</p>

<!-- <h2> y <p> son hijos de <div> -->
<div>
  <h2>Título de sección</h2>
  <p>Contenido de la sección.</p>
</div>

La regla del anidado correcto

La regla es simple: el último elemento en abrirse tiene que ser el primero en cerrarse.

Mirá este ejemplo con <p> y <strong>:

<!-- ❌ INCORRECTO: <strong> se abre dentro de <p>, pero se cierra después de </p> -->
<p>Este texto es <strong>muy importante.</p></strong>

<!-- ✅ CORRECTO: <strong> se abre y se cierra completamente dentro de <p> -->
<p>Este texto es <strong>muy importante</strong> para entender.</p>

En el ejemplo incorrecto, <p> se cierra antes de que <strong> se cierre. Las etiquetas se solapan: <p> abre, <strong> abre, <p> cierra, <strong> cierra — ese cruce rompe la estructura.

En el correcto, <strong> está completamente contenido dentro de <p>: <p> abre, <strong> abre, <strong> cierra, <p> cierra. Cada elemento envuelve limpiamente a su hijo.

Cuando las etiquetas se solapan, el navegador intenta adivinar qué quisiste decir, pero el resultado es impredecible.

Indentación

La indentación (los espacios al principio de cada línea) no cambia nada para el navegador, pero es fundamental para que el código sea legible. La convención es usar 2 espacios por cada nivel de anidado:

<div>
  <h2>Título</h2>
  <p>Este párrafo está a un nivel de anidado.</p>
  <div>
    <p>Este párrafo está a dos niveles de anidado.</p>
  </div>
</div>

A medida que los documentos crecen, la indentación es lo que permite ver de un vistazo qué elemento contiene a qué.

---

Comentarios

Un comentario es texto en el código que el navegador ignora completamente. Sirve para anotar o desactivar código temporalmente.

Sintaxis: <!-- texto del comentario -->

<!-- Este párrafo introduce la sección de contacto -->
<p>Para contactarnos, usá el formulario de abajo.</p>

<!--
  Este bloque está desactivado temporalmente.
  <p>Texto que no se mostrará.</p>
-->

Los comentarios son visibles en el código fuente de la página — quien inspeccione el HTML puede leerlos. Son una herramienta para el programador, no para el usuario.

---

Tu turno: envolvé las palabras “muy importante” con <strong> dentro del <p> existente. Hacé clic en “Comprobar”.