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

Un título cualquiera

Pon el cursor encima mia

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

Título centrado

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

Título alineado hacia la izquierda

Título centrado

Título alineado hacia la derecha

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:

AtributoOpcionesFunción
alignright, left, centerAlineación horizontal
valigntop, middle, bottomAlineación vertical
bgcolorValor numérico, hexadecimal o RGBUn fondo detrás de el elemento.
backgroundURLUn fondo detrás de el elemento.
idDefinido por el usuarioNombra un elemento que será usado con CSS.
classDefinido por el usuarioClasifica un elemento que será usado con CSS.
widthValor numericoEspecifica el ancho de un elemento.
heightValor numericoEspecifica la altura de un elemento.
titleDefinido por el usuarioMuestra un "pop-up" con un título para un elemento.