Atributos

Los atributos son parte integrante de los elementos HTML, ya que proporcionan información complementaria o instrucciones sobre un elemento. Al definir el comportamiento, la apariencia o la funcionalidad del elemento, los atributos mejoran su funcionalidad general. Los atributos se especifican en la tag de apertura de un elemento y constan de un nombre y un valor.

Sintaxis Básica

Los atributos sólo se especifican dentro de los corchetes triangulares de la tag de apertura de un elemento. La sintaxis para definir un atributo es la siguiente:

Puntos clave

• Los atributos pueden ser opcionales u obligatorios: Dependiendo del elemento, atributos específicos pueden ser necesarios para funcionar correctamente, mientras que otros son opcionales y proporcionan opciones de personalización adicionales;
• Los atributos van entre comillas: Los valores de los atributos van entre comillas dobles ("...") o simples ('...'). Esto ayuda a distinguirlos del nombre del elemento y facilita la lectura;
• Cada tag tiene su propio conjunto de atributos: Los distintos elementos HTML admiten atributos diferentes. Comprender los atributos específicos aplicables a cada elemento es esencial para utilizarlos eficazmente;
• Se pueden utilizar múltiples atributos: Es posible incluir múltiples atributos en un mismo elemento separándolos con un espacio. Esto permite una mayor personalización y control sobre el comportamiento del elemento.

Ejemplo de uso

Exploremos algunos ejemplos de elementos HTML con atributos para comprender cómo afectan al comportamiento de los elementos:

Explicación del código línea por línea:

1. Elemento input;
   • type="text" especifica que el campo de entrada debe aceptar texto plano del usuario;
   • placeholder="name" proporciona una pista o un ejemplo de la entrada esperada en el campo de entrada. Esperamos un nombre de usuario.
2. Elemento img;
   • alt="Forest" proporciona un texto alternativo para una imagen. Si no se cargara la imagen, el usuario vería el texto "Forest";
   • src="..." especifica la URL (Localizador Uniforme de Recursos) de origen de una imagen. Se localiza mediante este enlace (https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/forest+ejemplo+img.png) en Internet.
3. Elemento a;
   • El elemento target="_blank" especifica que cuando un usuario hace clic en el enlace, la URL de destino debe abrirse en una nueva pestaña del navegador;
   • El enlace de destino es href="https://www.google.com/".
4. Elemento button.
   • type="reset" proporciona un comportamiento de botón que, cuando se pulsa, restablece los campos del formulario a sus valores iniciales si el botón se especifica dentro del elemento form.

Nota

En este curso profundizaremos en los detalles de los atributos de cada elemento. Por ahora, es crucial comprender el concepto de atributos, su aplicación y el hecho de que cada elemento posee su propio conjunto de atributos. Estos atributos juegan un papel importante en la alteración de la apariencia, propósito y funcionalidad del elemento.

Resumen

Un elemento HTML normalmente consiste en una tag, atributos y contenido.

• Tag define el tipo de elemento (por ejemplo, p, img, etc.);
• Atributos (Attribute) proporcionan información adicional sobre el elemento (por ejemplo, src, alt, etc.);
• Contenido (Content) es todo lo que hay entre las tags de apertura y cierre del elemento.