Comprensión de las Etiquetas Emparejadas y Simples en HTML

HTML utiliza dos tipos de etiquetas: etiquetas en pareja y etiquetas individuales (autocontenidas). Cada una cumple una función diferente al estructurar una página web.

Etiquetas en pareja

Las etiquetas en pareja tienen una etiqueta de apertura y una de cierre. Encierran contenido, agrupan elementos y definen significado o estructura.

Sintaxis:

<tag_name>Some content</tag_name>

Aquí tienes un ejemplo real de uso de etiquetas en pareja:

En este ejemplo:

• <section>...</section>: agrupa contenido relacionado;
• <h1>...</h1>: añade un encabezado para la sección;
• <p>...</p>: contiene un párrafo que explica que la mayoría de las etiquetas HTML vienen en pareja.

Etiquetas individuales

Las etiquetas individuales no tienen etiqueta de cierre. Se utilizan cuando no se necesita contenido interno y todo el comportamiento se define a través de atributos.

Sintaxis:

<tag_name />

Aquí tienes un ejemplo real de uso de etiquetas individuales:

Este código incluye dos elementos:

• <input />: crea un campo de entrada de texto. El atributo placeholder=" name" muestra una sugerencia dentro del cuadro;
• <img />: muestra una imagen de frutas.
  • alt="Fruits": texto que se muestra si la imagen no se carga;
  • width y height: definen las dimensiones de la imagen;
  • src: especifica la URL de la imagen.

Anidación de etiquetas

Las etiquetas deben anidarse correctamente, como muñecas matrioskas, con cada etiqueta de cierre coincidiendo con su etiqueta de apertura en el orden adecuado.

Aquí tienes un ejemplo de etiquetas anidadas:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Considera el siguiente ejemplo válido:

Este código muestra un párrafo con un enlace y texto enfatizado:

• <p>...</p>: envuelve todo el párrafo;
• <a href="https://privacy.com">...</a>: crea un enlace clicable a la Política de Privacidad;
• <strong>...</strong>: pone en negrita la palabra "website" para destacarla.