Comprensión de las Etiquetas Dobles y Simples en HTML

En HTML, existen tanto etiquetas en pareja como etiquetas individuales (también conocidas como etiquetas autocontenidas o elementos vacíos). Cada tipo cumple una función específica y tiene su propio propósito.

Etiquetas en pareja

Las etiquetas en pareja constan de una etiqueta de apertura y una de cierre. Pueden envolver contenido y agrupar elementos para modificar algunas propiedades o reunir elementos por significado.

Sintaxis:

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

Etiquetas Simples

Las etiquetas simples consisten únicamente en una etiqueta de apertura y no tienen etiqueta de cierre. Se utilizan cuando la etiqueta no requiere contenido o cuando todo el contenido y comportamiento se especifica mediante atributos.

Sintaxis:

html
<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

Al anidar etiquetas, es esencial seguir el orden jerárquico, similar a las muñecas rusas. Cada etiqueta anidada debe estar adecuadamente contenida dentro de su etiqueta principal, respetando siempre las reglas de sintaxis de HTML.

Aquí tienes un ejemplo de etiquetas anidadas:

html
9
1
2
3
4
5
6
7
8
9
<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.

Resumen

HTML consiste en etiquetas pareadas y simples, cada una con diferentes propósitos. Las etiquetas pareadas tienen una etiqueta de apertura y otra de cierre para encerrar contenido, mientras que las etiquetas simples se cierran a sí mismas. Anidar correctamente las etiquetas y seguir la jerarquía adecuada es esencial para una estructura HTML bien formada.