Los Atributos de las etiquetas HTML
Los atributos HTML proporcionan información adicional sobre los elementos HTML. Se usan para modificar el comportamiento o la apariencia de una etiqueta, o para establecer relaciones entre elementos. Se colocan siempre en la etiqueta de apertura y constan de un nombre y un valor, separados por un signo de igual (=), con el valor generalmente entre comillas dobles.
1. Atributos Globales
Los atributos globales pueden ser usados en casi cualquier etiqueta HTML y son fundamentales para accesibilidad, estilo y manipulación con JavaScript.
| Atributo | Función | Ejemplo |
class | Asigna uno o más nombres de clase al elemento (usados para estilos CSS o selección con JavaScript). | <p class="destacado principal">Texto</p> |
style | Permite aplicar estilos CSS en línea directamente al elemento (generalmente se prefiere usar CSS externo). | <h1 style="color: blue; font-size: 20px;">Título</h1> |
title | Proporciona información adicional sobre el elemento, que a menudo se muestra como un tooltip (texto emergente) al pasar el cursor. | <img src="..." title="Logo de la empresa"> |
2. Atributos Específicos
Estos atributos solo son válidos para ciertas etiquetas y son esenciales para el funcionamiento de elementos interactivos o de medios.
Para Enlaces (<a>)
| Atributo | Función | Ejemplo |
href | Especifica la URL de destino del hipervínculo. | <a href="/contacto.html">Contacto</a> |
target | Indica dónde se abrirá el enlace. Los valores comunes son _blank (nueva pestaña) o _self (misma pestaña). | <a href="..." target="_blank">Abrir</a> |
Para Imágenes (<img>) y Medios
| Atributo | Función | Ejemplo |
src | Especifica la ruta o URL de la imagen o archivo multimedia. | <img src="ruta/foto.jpg" ...> |
alt | Texto alternativo que se muestra si la imagen no carga, crucial para accesibilidad y SEO. | <img ... alt="Un perro jugando en el parque"> |
width y height | Establecen el ancho y alto de la imagen o medio, generalmente en píxeles. | <img ... width="300" height="200"> |
Atributos de la etiqueta font
La etiqueta <font> y todos sus atributos asociados están obsoletos en HTML5. Esto significa que ya no forman parte del estándar web actual y no deben usarse en nuevos desarrollos. Los navegadores web modernos manejan todas las propiedades de estilo del texto (color, tamaño, tipografía) mediante CSS (Cascading Style Sheets).
La etiqueta <font> fue diseñada para aplicar estilos directamente en el HTML, lo que ahora se considera una mala práctica porque mezcla la estructura (HTML) con la presentación (CSS).
| Atributo | Función Original | Valor de Ejemplo |
color | Define el color del texto. | "red" o "#FF0000" |
face | Especifica la tipografía o familia de fuente. | "Arial, Helvetica, sans-serif" |
size | Establece el tamaño del texto, usando un sistema de 7 niveles (del 1 al 7) o valores relativos. | "4" o "+2" |
Ejemplo de Uso
<font color="blue" size="5" face="Georgia">Texto con estilo.</font>Atributos para las etiquetas párrafo y títulos
Los atributos que se utilizarán para estas etiquetas son los atributos globales y el atributo align que especifica la alineación horizontal del párrafo (left, center, right, justify).
<p align=»left»>Texto con estilo.</p>