HTML - Atributos

Los atributos son utilizados para personalizar las etiquetas. ¿Qué significa esto? Si por algún motivo, algún día quieres cambiar de tamaño una imagen o una tabla o cambiar el color de la fuente, entonces lo que necesitas es un atributo HTML. Todo esto es posible con la ayuda de los atributos.

La mayoría de las etiquetas tienen sus propios atributos. Hablaremos de esto mientras incluimos una nueva etiqueta. Pero ahora aprenderemos sobre algunos atributos genéricos que pueden utilizados con la mayoría de las etiquetas. Los atributos se ponen entre los corchetes ("<" y ">") dentro de la misma etiqueta de apertura.

Los atributos "class" y "id" en HTML

Estos dos atributos en general son lo mismo. No tienen un rol claro en el formato de los elementos pero son útiles detrás del escenario, con la ayuda del CSS. Hablaremos de su papel al mismo tiempo que estudiamos su sintaxis y su función en CSS.

La idea es que cuando quieras crear una clase de etiquetas para después referenciarlas vía CSS, puedes elegir entre dos etiquetas parecidas, pero con atributos parecidos. Pero échale un vistazo al siguiente ejemplo:

html<p id="italicparagraph">Párrafo tipo 1, itálica</p>
<p id="boldparagraph">Párrafo tipo 2, negrilla</p>

El atributo name

"name" es un poco diferente a id y a class. Si le das un nombre a un elemento éste se convertirá en una variable para Javascript, ASP o PHP. Algo que es bastante común de encontrar en formularios y otros campos de texto interactivos.

html<input type="text" name="my_text_field" />

Demo

Este atributo no tiene ningún efecto sobre el lo que se muestra en el navegador o sobre el campo del texto en si, aunque en el fondo tiene un papel muy importante.

El atributo title

El atributo title se usa normalmente para enlaces y muestra un pop-up, con el texto introducido, cuando se pone el cursor encima. El atributo title es una pieza fundamental para la optimización de contenidos para el motor de búsqueda como vera un poco mas tarde. Aunque, como ya he dicho, el atributo title se suele usar con los enlaces, se puede aplicar a la mayoría de etiquetas HTML.

html<h2 title="Soy un atributo de título!">Un título cualquiera</h2>
<a href="#" title="Yo soy un enlace en HTML">Pon el cursor encima mia</a>

Demo

Pasa tu ratón por encima del titulo o el enlace de arriba, así veras la magia del atributo "title". Este atributo le dará a tu página un poco más de interactividad y ayudara también a Google a entender un poco mas, el contenido de tu web.

HTML - El atributo align

Si deseas alinear a un lado o al otro, algunos elementos de tu página, entonces tendrás a tu disposición el atributo "align". Puedes alinear hacia la izquierda, derecha o hacia el centro de la página casi cualquier elemento. Por defecto los elementos se alinean hacia la izquierda, excepto cuando se especifica otra alineación.

html<h2 align="center">Título centrado </h2>

Demo

Otros ejemplos:

html<h2 align="left">Título alineado hacia la izquierda </h2>
<h2 align="center">Título centrado </h2>
<h2 align="right">Título alineado hacia la derecha </h2>

Demo

Los valores por defecto para los atributos

La mayoría de las etiquetas son atributos estándar. Esto significa que si no especificas otro atributo, el navegador lo hará por ti. Por ejemplo un párrafo se alineará por sí solo hacia la izquierda, excepto cuando especificas otra cosa; lo mismo sucede con una tabla. A medida que practiques entenderás mas cosas sobre los valores por defecto de algunas etiquetas.

Atributos genéricos

Debes recordar que los atributos son utilizados para personalizar los elementos de una página web. He juntado aquí algunos de los atributos más comunes utilizados en HTML:

Atributo	Opciones	Función
align	right, left, center	Alineación horizontal
valign	top, middle, bottom	Alineación vertical
bgcolor	Valor numérico, hexadecimal o RGB	Un fondo detrás de el elemento.
background	URL	Un fondo detrás de el elemento.
id	Definido por el usuario	Nombra un elemento que será usado con CSS.
class	Definido por el usuario	Clasifica un elemento que será usado con CSS.
width	Valor numerico	Especifica el ancho de un elemento.
height	Valor numerico	Especifica la altura de un elemento.
title	Definido por el usuario	Muestra un "pop-up" con un título para un elemento.

---