HTML atributos

En HTML, los atributos son pares nombre="valor" que agregamos dentro de las etiquetas para dar información adicional o modificar su comportamiento.

Ejemplo:

<a href="https://www.google.com" target="_blank">Ir a Google</a>

En este caso:

href indica la dirección del enlace.
target="_blank" hace que se abra la pagina de Google en una nueva pestaña.

Estructura de un atributo

Nombre: la palabra clave (por ejemplo, src, alt, class).
Valor: lo que se asigna, entre comillas (" " o ' ').
Van dentro de la etiqueta de apertura.

¡A tener en cuenta!

Algunos atributos booleanos no requieren valor (disabled, checked, readonly).

Atributos HTML más usados

id Identificador único para un elemento.

<p id="intro">Este es un párrafo con id.</p>

class Permite asignar una o más clases para aplicar estilos CSS o scripts.

<p class="resaltado">Texto resaltado</p>

src Especifica la ruta de un archivo (normalmente usado en imágenes, videos, scripts).

<img src="logo.png" alt="Logotipo">

alt Texto alternativo para imagenes, importante para accesibilidad o SEO.

<img src="logo.png" alt="Logotipo de la empresa">

href Dirección a la que apunta un enlace.

<a href="https://www.ejemplo.com">Visitar sitio</a>

title muestra información extra en un tooltip mientras se pasa el mouse por el elemento.

<abbr title="HyperText Markup Language">HTML</abbr>

target Define cómo se abre un enlace.
- _self → misma pestaña (por defecto).
- _blank → nueva pestaña.

<a href="https://google.com" target="_blank">Google</a>

style aplica estilos css en linea dentro de un elemento. No recomendado para proyectos grandes.

<p style="color: red;">Texto en rojo</p>

Se puede definir un elemento con varios atributos:

<a 
  href="https://developer.mozilla.org/es/docs/Web/HTML" 
  target="_blank" 
  title="Documentación de HTML"
  class="enlace"
>
  Aprende más sobre HTML
</a>

Buenas practicas con atributos HTML

✔ Usa id solo cuando sea realmente necesario y único.
✔ Usa class para aplicar estilos repetibles.
✔ Siempre poner alt en imágenes.
✔ Los nombres tienen que ser descriptivos (btn-principal, img-logo).
✔ Evitar usar style inline en proyectos grandes, mejor usar CSS externo.

Resumen

Los atributos en HTML permiten agregar significado, estilos y comportamiento a tus etiquetas. Usarlos correctamente mejora la accesibilidad, el SEO y la mantenibilidad del código.