Atributos en HTML

Hasta ahora hemos visto el uso de algunos elementos html en su forma más elemental, utilizando solamente las etiquetas (tags), sin ninguna información adicional, sin embargo, la mayoría de los elementos html aceptan atributos.

Los atributos sirven para proporcionar información adicional sobre los elementos. Permiten establecer las características de los elementos a los que están asociados.

Los atributos se colocan en la etiqueta de apertura del elemento y está integrada por dos partes: el nombre de la propiedad y el valor que se desea asignar a esa propiedad. Se recomienda colocar el nombre de la propiedad en minúscula, luego colocar el signo de igual y el valor de la propiedad en minúscula y entre comillas.

atributos-1
Estructura de un atributo en HTML

 

Atributos Básicos

Cada elemento html tiene atributos especificos de acuerdo a la función que tienen. Por ejemplo para la etiqueta <hr> existen los atributos:

  • align, el cual tiene las opciones:left, center y right.
  • noshade
  • size, para asignar el tamaño en pixeles.
  • width, para asignar el ancho en pixeles.

Sin embargo existen 4 atributos básicos, los cuales forman parte de los atributos globales que son utilizados en forma general por los elementos html:

  • id
  • title
  • class
  • style

id y class son utilizados para crear selectores que son utilizados en conjunto con las hojas de estilo en cascada (CSS).

title se utiliza para dar un título al elemento, a menudo se presenta como una etiqueta con el título del elemento cuando se pasa el cursor sobre el elemento.

style es utilizado para crear estilos (CSS) dentro de los elementos html donde son colocados.

Ejemplo

atributos-2
Ejemplo del uso de los atributos id y class

En este ejemplo se han creado tres párrafos <p>.

En el primer párrafo se ha utilizado el atributo id=”introducción”

 

atributos-3
Uso del atributo id

Se han creado dos párrafos donde se han utilizado el atributo class=”normal”.

atributos-4
Uso del atributo class

Aquí solamente se han identificado los elementos, sin embargo, esto es la base para la aplicación de diferentes estilos de acuerdo a la identificación.

atributos-5
Salida del ejemplo de uso de atributos id y class

En el siguiente ejemplo se muestra el uso del atributo title.

Atributos-11
Ejemplo con uso de atributo title

El atributo title permite que se muestre una etiqueta de identificación del elemento, al pasar el cursor por encima.

Atributos-12
Salida con ejemplo del atributo title

 

Atributos Globales o Genericos

Existen una serie de atributos que son aplicables a la mayoría de las etiquetas html, las cuales son llamados atributos globales, los cuales pueden ser revisados en la pagina de W3C.

 

A continuación, se muestra un ejemplo del uso de atributos en las etiquetas para párrafo y títulos.

atributos-8
Ejemplo del uso de atributo align en la etiqueta <p>
atributos-9
Salida del ejemplo de uso del atributo align

 

Atributos para Internacionalización

En HTML existen 3 atributos para internacionalización que están disponible para la mayoría de los elementos XHTML.

  • dir
  • lang
  • xml:lang

El atributo dir permite indicar la dirección en la cual el texto fluye, existen dos opciones:

  • ltr : texto fluye de izquierda a derecha
  • rtl: texto fluye de derecha a izquierda

Los atributos lang y xml:lang. Ambos permiten indicar el lenguaje principal a ser utilizado en el documento. xml:lang  sustituye a lang el cual se mantiene por compatibilidad con versiones anteriores de HTML.

Los valores que acepta el atributo lang son códigos de dos caracteres definidos en el estándar ISO.639.

 

 

Referencias Bibliográficas

Alvarez, R. (2012). Manual de HTML de Desarrollo Web.

W3C. (2015). W3C School. Obtenido de http://www.w3schools.com/tags/ref_standardattributes.asp

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s