Los atributos son parámetros adicionales de información que se añaden a los elementos HTML con el objetivo de definir ciertas características del elemento. Se introducen en la etiqueta de apertura de los elementos. Hay algunos atributos globales y luego cada elemento puede tener atributos propios.
Los atributos tienen dos partes: el nombre y el valor. Las dos partes están separadas por el símbolo «igual» (=). Veamos las dos partes con más detalle:
El nombre permite definir la propiedad que se quiere configurar y es la parte del atributo que queda a la izquierda del «igual». Por ejemplo, en un elemento de enlace <a> podemos definir el atributo href con la finalidad de indicarle la ruta de destino. ¡Así se crean los hiperenlaces!
El valor permite establecer la configuración deseada y se introduce después del símbolo «igual». Siguiendo el ejemplo anterior, podemos especificar una URL para que el usuario pueda navegar a través de ese enlace: href="/". En este caso, el enlace nos conduce a la página de inicio.
Esta es la sintaxis del ejemplo mencionado:
<a href="/">Recursivos</a>
Dando como resultado un enlace funcional:
Sintaxis de los atributos
Los nombres de los atributos y sus valores se pueden escribir tanto en mayúsculas como en minúsculas; los navegadores lo interpretan ignorando mayúsculas y minúsculas. No obstante, el W3C recomienda que se escriban en minúsculas. Además, nunca debe haber dos o más atributos en la misma etiqueta con la misma información difiriendo en mayús./minús.
En la sintaxis HTML, los atributos se pueden especificar de cuatro maneras: sin valor, sin comillas, con comilla simple y con comilla doble.
Atributo sin valor
Existen atributos que se pueden especificar sin ningún valor. Es decir, que es suficiente con poner el nombre del atributo para que la característica en cuestión quede definida en el elemento. Es habitual encontrar el siguiente ejemplo:
<input disabled>
Atributo sin comillas
Algunos atributos se pueden especificar incluyendo las dos partes (nombre y valor), pero sin que el valor requiera estar entre comillas. Para que esto sea posible, el valor no debe contener espacios ni los caracteres siguientes: ", ', >, =. Tampoco debe estar vacío después del símbolo «igual». Por ejemplo:
<input value=yes>
Atributo con comilla simple
Los valores de los atributos también se pueden especificar englobándolos dentro de comillas. Si usamos la comilla simple, el valor no puede contener precisamente el carácter de la comilla simple '. Si se usara, tendríamos tres ', y el valor usado sería el que queda entre las dos primeras. La ventaja es que podemos usar comillas dobles entre las comillas simples. Veamos un par de ejemplos:
<input type='checkbox'>
<a href='/' title='Programa: "Hola, mundo!"'>Enlace</a>
Atributo con comilla doble
Del mismo modo, también se pueden especificar los valores de los atributos encerrándolos entre comillas dobles. Si lo hacemos, no debemos usar el carácter de la comilla doble " dentro de la cadena de texto, pues el valor usado sería el que queda entre las dos primeras, y el resto sería ignorado. Gracias a las comillas dobles podemos usar comillas simples dentro de ellas. Por ejemplo:
<input type="checkbox">
<a href="/" title="Programa: 'Hola, mundo!'">Enlace</a>
Atributos esenciales
Los atributos esenciales son los que permiten identificar un elemento, y existen tres tipos. Son los siguientes: id, class y title. Estos tres atributos se pueden aplicar prácticamente a todos los elementos HTML.
El atributo ‘id’
El atributo id establece un identificador único o unívoco de un elemento del documento HTML. No debe haber ningún otro elemento con el mismo identificador. El id se utiliza ampliamente en CSS y JavaScript para aplicar estilos o apuntar a un elemento. Ejemplo de cómo se declara un id en un elemento:
<p id="foo">Esto es un párrafo.</p>
En CSS, el id se puede usar como selector para aplicar estilos en cascada a un elemento, y dentro de los tipos de selectores es el que tiene más peso o prioridad. Las clases CSS (class) también son selectores y tienen peso medio. Los selectores de tipo (nombres de elementos) son los que tienen menos peso.
El atributo ‘class’
El atributo class se utiliza para asociar un elemento con un estilo en concreto. Se puede utilizar tantas veces como se requiera en un mismo documento HTML. El valor de este atributo puede contener guiones separadores -. Ejemplo de declaración de una clase (class) en un elemento:
<p class="foo-bar">Esto es un párrafo.</p>
Además, podemos añadir varios valores separados por espacios. De este modo obtendremos varios selectores diferentes para un mismo elemento. Esta práctica es útil cuando definimos propiedades de estilos dinámicas con la ayuda de JavaScript u otro lenguaje de programación. Por ejemplo:
<p class="foo bar">Párrafo con dos clases.</p>
El atributo ‘title’
El atributo title permite establecer un título a un elemento con el fin de mejorar la accesibilidad de la página web. Los navegadores muestran el título cuando el usuario pone el puntero del ratón por encima del elemento. Se utiliza mucho en enlaces:
<a href="/" title="Cursos de programación">Recursivos</a>
Este es el resultado: Recursivos
Atributo de estilos
El atributo de estilos es el que permite modificar la apariencia de forma directa e individualizada sobre cada uno de los elementos.
El atributo de estilos ‘style’
Además de aplicar estilos CSS mediante los atributos id y class también podemos hacerlo directamente sobre el elemento en cuestión gracias al atributo style. El valor de este atributo es código CSS, y por lo tanto se recomienda aprender CSS. En el siguiente ejemplo centramos un párrafo:
<p style="text-align: center">Párrafo centrado.</p>
Dando como resultado un párrafo centrado:
Párrafo centrado.
Atributos de idioma (internacionalización)
Los atributos de idioma son los que permiten declarar el idioma predeterminado del texto de la página. Existen dos atributos de este tipo: lang y xml:lang.
El atributo ‘lang’
El atributo lang permite indicar el idioma principal que se ha usado en el documento, y se utiliza en la etiqueta de apertura del elemento <html>. Si existe texto en un segundo idioma en el documento, se utilizará este atributo de nuevo en el elemento que lo contiene. Se usa en documentos HTML. Ejemplo:
<html lang="es"></html>
Los valores del atributo lang son códigos de dos caracteres que especifican el idioma. Estos códigos están definidos en la norma ISO 639, que actualmente contiene una lista de 184 códigos de dos letras para identificar los idiomas más importantes del mundo. Algunos de ellos:
- Español:
es - Catalán:
ca - Gallego:
gl - Inglés:
en - Francés:
fr - Alemán:
de - Italiano:
it - Portugués:
pt - Japonés:
jp
El atributo ‘xml:lang’
El atributo xml:lang se utiliza de igual forma que el atributo lang explicado en el punto anterior. ¿Cuándo debe usarse lang y cuándo xml:lang?
En un documento HTML siempre debe usarse lang. Si el documento tiene el DOCTYPE XHTML 1.x también deberá usarse xml:lang. Si el documento es XML deberá usarse únicamente xml:lang. Ejemplo usando ambos a la vez:
<html lang="es" xml:lang="es"></html>
Atributos de eventos
Los atributos de eventos están relacionados con acciones determinadas de JavaScript. Se utilizan para ejecutar funciones que se iniciarán cuando el evento se ejecute, por ejemplo, cuando el usuario haga clic sobre un elemento, cuando pase el puntero del ratón por encima, etc.
Por poner algunos ejemplos, tenemos el atributo onclick que ocurre cuando se hace clic sobre un elemento, el atributo ondblclick que ocurre cuando se hace doble clic sobre un elemento o el atributo onselect que ocurre cuando se selecciona un elemento. Pero hay muchos más.
El valor de este atributo es código JavaScript o el nombre de una función JavaScript. Por lo tanto, se recomienda aprender JavaScript para sacar partido del amplio abanico de posibilidades que ofrecen estos eventos. En el siguiente ejemplo, cuando el usuario haga clic en el elemento se ejecutará la función HazAlgo().
<p onclick="HazAlgo()">Párrafo.</p>
Consulta la página de referencia de atributos de eventos para conocer todos los que se pueden utilizar. Para saber los que usar conviene conocerlos bien.
Combinar HTML con CSS y JavaScript
La combinación del HTML con CSS y JavaScript tiene mucho potencial. De todas formas, es recomendable usar las tres tecnologías en archivos diferentes, es decir: es una buena práctica separar los estilos CSS en archivos .css y el código JavaScript en archivos .js, quitándolos del documento HTML.
