En el primer artículo de esta serie hablamos sobre qué son las etiquetas. Puedes acceder a él haciendo clic en el enlace de abajo:
https://www.hcode.com.br/blog/html5-guia-completo-01-o-que-sao-tags
En este artículo hablaremos sobre atributos. Es muy común utilizarlos y son muy necesarios para el desarrollo en HTML5. Pero, al fin y al cabo, ¿qué es un atributo?
¿Qué es un atributo?
Un atributo involucra una información adicional que comunicamos a nuestra etiqueta, para que pueda cumplir su papel o función de manera eficaz. Para entenderlo mejor, piensa en este ejemplo: imagina que necesitas ir al médico, porque sientes un fuerte dolor. ¿Cuál es el objetivo del médico? Es ayudarte a deshacerte del dolor. Pero, para ello, ¿qué debes informar? Es necesario decir dónde está el dolor, ¿verdad? Solo con esa información el médico podrá saber qué recetarte o qué tratamiento realizar. En otras palabras, solo con esa información podrá cumplir su papel.
De la misma forma son las etiquetas. Por ejemplo: ¿cuál es la función de una etiqueta de imagen? Es mostrar la imagen. Pero, para eso, ¿qué necesita saber? El camino de la imagen a mostrar, y para eso usamos el atributo src.
Cómo definir un atributo
Los atributos siempre se informarán en la etiqueta de apertura de los elementos. Podemos informar un atributo de dos maneras:
1 - Informando su nombre y un valor. Ejemplo:
<h2 class="subtitle">Hcode Treinamentos</h2>
En el código anterior informamos a la etiqueta un atributo class (responsable de aplicar una clase CSS al elemento), luego un signo igual y entre comillas el nombre de la clase. Este es el estándar seguido en todos los atributos que tienen un valor.
2 - Informando solo su nombre. Ejemplo:
<input type="checkbox" checked>
En el código anterior creamos una etiqueta del tipo checkbox e informamos a ella el atributo checked (responsable de definir si el elemento estará marcado o no). Sin embargo, ten en cuenta que informamos solo su nombre, sin ningún valor.
Tipos de Atributos
Podemos dividir los atributos en dos grupos: 1) atributos globales y 2) atributos específicos.
Atributos Globales
Son atributos a los que todas las etiquetas tienen acceso. Por lo tanto, pueden ser definidos en cualquier elemento. Ejemplo:
<p title="Esta frase es sensacional">Que la Fuerza esté contigo</p>
Atributos Específicos
Son atributos a los que solo una o algunas etiquetas tienen acceso, son atributos propios de ellas. Ejemplo:
<form action="register.php">
...
</form>
En el código anterior vemos el atributo action, que solo puede ser definido por la etiqueta , ninguna otra etiqueta (hasta el momento) tiene acceso a este atributo.
En conclusión, podemos decir que así como un piloto de avión necesita las coordenadas GPS para llegar a su destino, las etiquetas necesitan de los atributos para funcionar bien y así llegar al “destino” que todos queremos: producir sitios y sistemas profesionales que sean agradables de navegar.
También puedes acceder a este contenido en video:
Además, puedes aprovechar e inscribirte hoy mismo en nuestro Curso Completo de HTML5, donde enseñamos todas las etiquetas y todos los atributos del lenguaje HTML :).
¡Hasta el próximo artículo!