Atributos HTML

Los atributos proveen información adicional a los elementos HTML.

  • Los elementos HTML pueden tener atributos.
  • Los atributos proveen información adicional a un elemento HTML.
  • Los atributos son especificados en la etiqueta de apertura.
  • Los atributos son declarados en pares de nombre/valor como: name="valor".

El atributo lang

El lenguaje del documento puede ser declarado en la etiqueta <html>.

El lenguaje es declarado en el atributo lang.

La declaración de un idioma es importante para la accesibilidad de aplicaciones y motores de búsqueda.

<!Doctype html>
<html lang="es-mx">
<body>
  <h1>Mi Primer Encabezado</h1>
  <p>Mi primer Párrafo</p>
</body>
</html>

Las primeras dos letras especifican el lenguaje. Si existe una regionalización puedes agregar un guión medio más las dos letras de la región (mx).

El atributo title

Los Párrafos HTML son definidos con la etiqueta <p>.

En este ejemplo, el elemento <p> tiene un atributo title. El valor del atributo es "Sobre Tutoriales.ExaSoluciones.com".

<p title="Sobre Tutoriales.ExaSoluciones.com">
  Tutoriales.ExaSoluciones.com es un Sitio para Aprender a Desarrollar Páginas Web
</p>

Cuando muevas el cursor del ratón sobre el elemento, el titulo se mostrara en una caja emergente (tooltip).

El atributo href

Las ligas HTML son definidas con la etiqueta <a>. La dirección de la liga es definida en el atributo href.

<a href="http://www.exasoluciones.com">Esto es una liga</a>

Más adelante en este tutorial, aprenderemos más sobre las ligas y la etiqueta <a>.

El atributo size

Las imágenes HTML son definidas con la etiqueta <img>.

La ruta y el nombre del archivo es definido en el atributo src, para la anchura en el atributo width y para la altura en el atributo height.

<img src="logotipo.png" width="100" height="80">

El tamaño de la imagen por defecto son consideradas en pixeles: width="100" significa que tiene 100 pixeles de ancho.

Aprenderemos más de imágenes y la etiqueta <img> en este tutorial más adelante.

El atributo alt

El atributo alt ofrece un texto alternativo cuando el elemento no es mostrado.

<img src="logotipo.jpg" alt="tutoriales Exa Soluciones" width="100" height="80">

Sugerencia: Siempre entrecomilla los valores de los atributos

El estándar HTML5 no requiere entrecomillar los valores.

El atributo href que se ha demostrado anteriormente, se puede escribir como:

<a href=http://www.tutoriales.exasoluciiones.com>

El W3C recomienda en HTML 4 las encomillar los valores y en documentos tipo XHTML quedan obligado las comillas para dichos valores de atributos.

Aunque debes considerar que hay casos en los que al no encomillar los valores, podría no mostrar correctamente sobre todo si existen espacios en blanco:

<p title=Acerca de Tutoriales.ExaSoluciones.com>

Este ejemplo considerará solo la palabra Acerca como titulo del atributo.

Encomillar los valores de los atributos es la forma común de escribir el código HTML, dado que omitirlos puede producir errores. Por eso recomendamos altamente el uso de las comillas para los valores de atributos.

Comillas sencillas o dobles ?

Las comillas dobles es la forma más usada en la escritura de código HTML, pero comillas sencillas también pueden ser usadas.

En algunas situaciones, cuando el valor del atributo contiene comillas dobles es posible utilizar comillas sencillas de esta manera:

<p title='Juan "Penas" Gutiérrez'>

o viceversa:

<p title="Juan 'Penas' Gutiérrez">

Resumen del Capitulo

  • Todos los elementos HTML pueden tener atributos.
  • El atributo title añade información adicional en una caja emergente a un elemento HTML.
  • El atributo href provee la información de la dirección a los elementos a (ligas).
  • Los atributos width y height proveen la información de tamaño para los elementos image (imágenes).
  • El atributo alt provee información para navegadores lectores de texto que no permite mostrar las imágenes.
  • Recomendamos utilizar letras en minúsculas para escribir el código HTML.
  • Recomendamos utilizar encomillar los valores de los atributos y con doble comilla.

Lista de algunos Atributos HTML

A continuación mostramos una lista de algunos atributos más usados para escribir código HTML.

Atributo Descripción
alt Específica un texto alternativo para un elemento img (imagen).
disabled Específica que un elemento input debe estar deshabilitado.
href Específica una URL (dirección web) a un elemento a (liga).
id Específica un ID (identificador) único a un elemento HTML.
src Específica una URL (dirección web) a un elemento img (imagen).
style Específica una línea de estilos CSS para un elemento HTML.
title Especifica información adicional sobre un elemento HTML (mostrado en una caja emergente).
value Especifica el valor (el texto a mostrar) para un elemento input.

Atributos Globales

Atributo Descripción
accesskey Especifica una tecla de acceso directo para activar/enfocar un elemento.
class Especifica uno o más nombres de clase para un elemento (hace referencia a una clase en una hoja de estilo).
contenteditable Especifica si el contenido de un elemento es editable o no.
data-* Se utiliza para almacenar datos personalizados privados de la página o aplicación.
dir Especifica la dirección del texto para el contenido de un elemento.
draggable Especifica si un elemento se puede arrastrar o no.
enterkeyhint Especifica el texto de la tecla Enter en un teclado virtual.
hidden Especifica que un elemento aún no es relevante o ya no lo es.
id Especifica una identificación única para un elemento.
inert Especifica que el navegador debe ignorar esta sección.
inputmode Especifica el modo de un teclado virtual.
lang Establece el idioma del contenido en un Elemento HTML.
popover Especifica un elemento emergente.
spellcheck Especifica si se debe revisar o no la ortografía y la gramática del elemento.
style Especifica un estilo CSS en línea para un elemento.
tabindex Especifica el orden de tabulación de un elemento.
title Especifica información adicional sobre un elemento.
translate Especifica si el contenido de un elemento debe traducirse o no.