Aprendamos qué son, para qué sirven y cómo se ponen los atributos HTML, dentro de las etiquetas para controlar mejor las características de nuestros elementos HTML; los atributos nos dan mayor poder al momento de personalizar y agregar ciertos aspecto en nuestras páginas web.

Qué son los atributos en HTML

Los atributos en HTML se pueden considerar como información adicional que se coloca siempre en la etiqueta de apertura, esto para añadir, complementar información o significado al elemento HTML al que estamos colocando.

¡Venga ya! agreguemos un poco información y estilo a nuestro contenido. Todas las etiquetas de HTML y sus atributos.

¡Antes! Debo mencionar que para poner estilo a una página web, definitivamente es mucho mejor utilizar el lenguaje de estilos CSS, pero no está de más aprender a utilizar algunos estilos en HTML, podemos necesitar en algún momento.

Veamos algunos atributos y cuál es su función.

Lista de los atributos más usados en HTML

• Id =" ": Para identificar un elemento único.
• class =" ": para Identificador de varios elementos.
• style =" ": Para darle un estilo al elemento.
• alt=" ": Proporciona un texto alternativo para elementos multimedia, como imágenes.
• href =" ": Para establecer URL de destino de un enlaces.
• height =" ": Para determinar altura.
• width =" ": Para determinar ancho.
• src=" ": Para especificar la fuente de imágenes.

Atributos que ya no se usan

Antes solían usarse algunos atributos que a continuación mencionaremos, sin embargo, aunque algunos navegadores aun lo reconozcan, es mejor evitarlas y en su lugar usar estilos CSS, o usar el atributo style que veremos más adelante.

• align: Se usaba para alinear el contenido de elementos como imágenes o tablas. Ahora se prefiere utilizar CSS para el alineamiento.
• border: podía especificar el ancho del borde de un elemento mediante el atributo border. Ahora se recomienda utilizar CSS para controlar el estilo y ancho del borde.
• width y height (atributos de la etiqueta table): se utilizaban width y height en las etiquetas para definir el ancho y alto de las tablas. Ahora se recomienda usar CSS para la presentación y el diseño (aunque aun funciona y es aceptado).
• bgcolor: se utilizaba para establecer el color de fondo. Hoy en día, se prefiere utilizar CSS para estilos de fondo.
• font: se usaba para definir propiedades de fuente, como tipo, tamaño y color. En lugar de esto, se recomienda el uso de estilos de fuente mediante CSS.

Valor de un atributo

Cuando se hace uso de un atributo HTML se debe especificar su valor, este puede representar una cantidad exacta, característica especifica o simplemente en que medida se ejecutará dicho atributo.

El valor se expresa entre comillas después del signo de (=), de acuerdo al atributo, pueden haber una variedad de valores disponibles. Por ejemplo, en caso de align puede tomar el valor de center (centro), right (derecha), left (izquierda), justify (justificado).

Cómo colocar atributos en HTML

Un atributo se escribe de la siguiente manera: Atributo=«valor»  en esa forma, el nombre del atributo, seguido del signo igual (=) y entre comillas el valor, todo esto siempre dentro de la etiqueta de apertura.

Por lo tanto el atributo escrito en una etiqueta (por ejemplo párrafo) se ve así: <p atributo="valor">Este es un párrafo</p>

<p id="unico">Este es un párrafo es el unico con id unico</p>

Atributos HTML y sus valores

A continuación veamos algunos atributos y los valores que puede tomar:

Atributo: valores

• Id: su valor puede ser cualquier palabra que sirve para identificar un elemento. Identificar un elemento servirá por ejemplo para ponerle un estilo único con CSS.
• class: su valor puede ser cualquier palabra, sirve para identificar a un grupo de elementos. Esto servirá por ejemplo para poner un estilo a todos esos elementos que tienen dicha class.
• href: se usa para enlaces y su valor puede ser la dirección de un carpeta o URL donde dirigirá dicho enlace al hacer clic en ella.
• alt: para poner texto alternativo de una imagen, será el texto que se muestre en caso el archivo multimedia no cargue.
• height: para definir altura, su valor puede ser una medida con su unidad de medida, por ejemplo: 10px, 12em, 100%.
• width: define el ancho y su valor puede ser cualquier medida con su respectiva unidad de medida.

Algunos valores de atributos que solían usarse

Aunque los siguientes ya no se usan, ya que es mejor hacerlo con CSS, o en todo caso con atributo style que veremos más adelante, no está de más mencionarlas y que sepas los valores que se usaban para que tengas una idea.

• align: alineación, sus valores pueden ser: center, right, left, justify.
• border-style: estilo de borde, los valores disponibles son: solid, dotted, dashed, double, etc.
• bgcolor: Para color de fondo para ciertos elementos como body, el valor puede ser cualquier color en formato palabra, hexadecimal, RGB, etc. ejemplo: red, green, #ff0000, etc.

Y así, existían atributos que se aplicaban a etiquetas HTML.

Ejemplos de como usar atributos HTML

A continuación veremos varios ejemplos de cómo usar atributos con sus respectivos valores en HTML, entre los ejemplos veremos el uso de atributos: id, class, href, src.

<div id="miDiv">Este es un div con un identificador único.</div>

<p class="miClase">Este es un párrafo con una clase para estilos.</p>

<a href="https://www.ejemplo.com">Haz clic aquí para visitar el sitio de ejemplo</a>

<img src="imagen.jpg" alt="Descripción de la imagen">

<img src="foto.jpg" width="300" height="200" alt="Descripción de la imagen">

El atributo style

El atributo style sirve para agregar estilo a los elementos HTML, la apariencia de los elementos que conocimos hasta ahora y los que aprenderemos en lecciones posteriores pueden ser controlados mediante una enorme variedad propiedades y valores.

Conocer y aplicar todas la propiedades y valores disponibles, ya corresponde al curso de CSS, sin embargo debemos conocer como se puede emplear dentro de una etiqueta HTML.

Desarrolladoresweb.org

Aplicando style:

El atributo style se declara como cualquier otro atributo HTML, su valor puede contener varias declaraciones de estilo separadas por espacio y eso lo hace diferente a otros atributos.

A grandes rasgos, una declaración consiste en una propiedad y su respectivo valor, una declaración siempre tiene la siguiente forma: propiedad: valor; primero se escribe la propiedad seguido de dos puntos para definir su valor y finamente se cierra con un punto y coma (;)

Ejemplo 1:

Por ejemplo, el atributo style se usará para alienar el texto, dentro del atributo style se usará la propiedad CSS text-align con su valor en center aplicado a un párrafo para que el texto este alineado al centro. Además probaremos los otros valores como el de derecha (right) e izquierda (left).

<p style="text-align: center;">Este es un párrafo alineado al centro.</p>

<p style="text-align: right;">Este es un párrafo alineado a la derecha.</p>

<p style="text-align: left;">Este es un párrafo alineado a la izquierda.</p>

Resultados:

Nota: Conocer todas las propiedades de CSS es para un curso completo de CSS, que desarrollaremos después de terminar el curso de HTML, por ahora es suficiente que entiendas que el atributo STYLE se usa para ponerle estilo personalizado al elemento HTML en el que se usa. Por otro lado, en el curso de CSS aprenderás que existen mejores prácticas para aplicar estilos que usarlo directamente en atributo style de HTML.

Ejemplo 2:

A continuación usaremos el atributo style pero con más cantidad de propiedades CSS, no te preocupes si las propiedades y valores que usaremos dentro de style son desconocidos para ti, poco a poco iremos resolviéndolas en lecciones futuras y más adelante en el curso de CSS.

<p style="font-size: 14px; font-family: Lato; color: #1d1778; background-color: yellow; padding: 12px; margin: 10px; width: 100px; border-style: dotted; border-color: #000000; border-width: 5px;"> Este es un párrafor con estilo, gracias al atributo style...</p>

Con un poco de intuición puedes entender lo que acabamos de escribir, simplemente estamos expresando instrucciones mediante propiedades y valores, fíjate:

• font-size: tamaño de letra;
• font-family: tipo de letra;
• color: color de letra;
• backgroun-color:color de fondo;
• padding: relleno;
• margin: margen;
• width: ancho;
• border-style: estilo de borde;
• border-color: color de borde;
• border-width: ancho de borde;

Resultado:

Un momento ¿Que acaba de suceder? te preguntarás, pues simplemente hemos aplicado el atributo style con una variedad de propiedades y valores; por ahora no deberías preocuparte por entender, y conocer todas las propiedades disponibles, simplemente ten en cuenta que style sirve para poner estilo, además no es la mejor forma de realizar esto, pues existe CSS un lenguaje pensado para estilo.

Al culminar el curso de HTML estarás listo para CSS, por ahora continua con lo que sigue:).

Resumen

• Los atributos en HTML se caracterizan por estar dentro de la etiqueta de apertura
• Los atributos HTML tienen un valor
• El valor de los atributos va entre comillas (» »)
• El valor de un atributo HTML se especifica antecediéndolo con un signo de igual (=)
• Los atributos determinan estilos, identificadores, etc.

En las próximas lecciones conoceremos más etiquetas HTML y a la vez los atributos que se suelen ser aplicados a las mismas. ¡Sigamos aprendiendo!