Saltar al contenido principal

Etiquetas y Atributos

La construcción de contenido en HTML se basa en el uso de etiquetas y atributos.

Etiquetas (Tags)

Las etiquetas son las palabras clave, rodeadas de corchetes angulares (< y >), que envuelven el contenido para decirle al navegador cómo interpretarlo.

La mayoría de los elementos HTML constan de dos etiquetas:

  • Etiqueta de apertura: <nombre> (ej. <p>)
  • Etiqueta de cierre: </nombre> (ej. </p>)

El contenido se coloca entre ambas.

Ejemplo:

<p>Este es un párrafo de texto.</p>

Algunas etiquetas son "vacías" o "autocerradas", lo que significa que no contienen texto y no requieren una etiqueta de cierre. Sus atributos son suficientes para definir su comportamiento e información.

Ejemplos de etiquetas vacías:

  • <br> (Salto de línea)
  • <hr> (Línea horizontal)
  • <img> (Imagen)

Atributos (Attributes)

Los atributos proporcionan información adicional sobre los elementos HTML. Se definen siempre dentro de la etiqueta de apertura.

Los atributos suelen venir en pares de nombre="valor".

Ejemplo: El elemento imagen requiere dos atributos principales para funcionar correctamente:

<img src="logo.png" alt="Logotipo de la empresa">
  • src (source/origen): Indica al navegador dónde encontrar el archivo de imagen.
  • alt (texto alternativo): Muestra un texto si la imagen no se carga, y es crucial para la accesibilidad y el SEO.

Atributos Globales: Algunos atributos se pueden aplicar a casi cualquier etiqueta:

  • id: Un identificador único en toda la página para ese elemento específico.
  • class: Asigna el elemento a una o más "clases" para aplicarle estilos CSS o seleccionarlo con JavaScript.
  • style: Permite añadir estilos CSS directamente en la etiqueta (no recomendado en la mayoría de los casos).