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. |