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

Etiquetas en Pares

Las etiquetas en pares tienen una etiqueta de apertura y otra 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 pares:

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 pares.

Etiquetas Simples

Las etiquetas simples no tienen etiqueta de cierre. Se utilizan cuando no se necesita contenido interno y todo el comportamiento se define mediante atributos.

Sintaxis:

<tag_name />

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

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 matrioshka, 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 enfatizarla.