En este artículo conoceremos los Atributos HTML , su implementación a través de los ejemplos. Todos los elementos HTML tienen atributos que proporcionarán información adicional sobre ese elemento en particular. Toma 2 parámetros, es decir, un nombre y un valor que definen las propiedades del elemento y se colocan dentro de la etiqueta del elemento.
El parámetro de nombre toma el nombre de la propiedad que nos gustaría asignar al elemento y el valor toma el valor de las propiedades o la extensión de los nombres de las propiedades que se pueden alinear sobre el elemento. Cada nombre tiene algún valor que debe escribirse entre comillas.
Sintaxis:
<element attribute_name="attribute_value">
Atributos soportados: Es un atributo global que es soportado por todas las etiquetas.
Consulte el artículo Referencia completa de atributos HTML para ver todos los atributos en detalle.
Los siguientes son algunos de los atributos más utilizados en HTML.
Atributo HTML src : si queremos insertar una imagen en una página web, debemos usar la etiqueta <img> y el atributo src. Tendremos que especificar la dirección de la imagen como el valor del atributo dentro de las comillas dobles.
Ejemplo: este ejemplo explica los atributos HTML src para especificar la dirección de origen del archivo.
HTML
<html> <head> <title>src Attribute</title> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"> </body> </html>
Salida :
Atributo origen
Atributo HTML alt : esta es una etiqueta alternativa que se utiliza para mostrar o mostrar algo si el atributo principal, es decir, la etiqueta <img>, no muestra el valor que se le ha asignado. Esto también se puede usar para describir la imagen a un desarrollador que en realidad está sentado al final de la codificación.
Ejemplo: Este ejemplo explica los atributos HTML alt para especificar el nombre del archivo cuando la imagen no se carga correctamente.
HTML
<html> <head> <title>alt Attribute</title> </head> <body> <!--If the image is not found or the img field is left blank the alt value gets displayed--> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" alt="The Logo"><br> <img src="" alt="Since the src value is blank,the alt value is displayed"> </body> </html>
Salida :
Atributo alt
Atributo HTML de ancho y alto : este atributo se utiliza para ajustar el ancho y el alto de una imagen.
Ejemplo : este ejemplo explica los atributos de ancho y alto de HTML para especificar los diferentes tamaños de las imágenes.
HTML
<html> <head> <title>Width and Height</title> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" width="300px" height="100px" > </body> </html>
Salida :
atributo de ancho y alto
Atributo de identificación HTML : este atributo se utiliza para proporcionar una identificación única a un elemento. Pueden surgir situaciones en las que necesitemos acceder a un elemento en particular que puede tener un nombre similar a los demás. En ese caso, proporcionamos diferentes ID a varios elementos para que se pueda acceder a ellos de forma única. Las propiedades que amplían el uso de id se utilizan generalmente en CSS, que aprenderemos más adelante.
Ejemplo: este ejemplo explica los atributos de identificación HTML para especificar el valor único para el elemento específico.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#geeks {
color: green;
}
</style>
</head>
<body>
<h1 id="geeks">Welcome to GeeksforGeeks</h1> </body>
</html>
Producción:
atributo de identificación
Atributo de título HTML : el atributo de título se utiliza para explicar un elemento al pasar el mouse sobre él. El comportamiento difiere con varios elementos pero, en general, el valor se muestra mientras se carga o se pasa el puntero del mouse sobre él.
Ejemplo : este ejemplo explica los atributos del título HTML para especificar los metadatos del elemento al pasar el mouse sobre él.
HTML
<html> <head> <title>title Attribute</title> </head> <body> <h3 title="Hello GeeksforGeeks">Hover to see the effect</h3> </body> </html>
Salida :
Título Atributo
Atributo HTML href : este atributo se utiliza para especificar un enlace a cualquier dirección. Este atributo se usa junto con laetiqueta <a> . El enlace colocado dentro del atributo href se vincula al texto que se muestra dentro de la etiqueta <a>. Al hacer clic en el texto seremos redirigidos al enlace. De forma predeterminada, el enlace se abre en la misma etiqueta, pero al usar elatributo de destino y establecer su valor en «_blank» , seremos redirigidos a otra pestaña u otra ventana según la configuración del navegador.
Ejemplo : este ejemplo explica los atributos HTML href que especifican la dirección del enlace del archivo.
HTML
<html> <head> <title>link Attribute</title> </head> <body> <a href="https://www.geeksforgeeks.org/"> Click to open in the same tab </a><br> <a href="https://www.geeksforgeeks.org/" target="_blank"> Click to open in a different tab </a> </body> </html>
Salida :
atributo href
Atributo de estilo HTML : este atributo se utiliza para proporcionar varios efectos CSS a los elementos HTML, como aumentar el tamaño de fuente, cambiar la familia de fuentes, colorear, etc.
Ejemplo : este ejemplo explica los atributos de estilo HTML para especificar las propiedades de estilo para el elemento HTML.
HTML
<html> <head> <title>style Attribute</title> </head> <body> <h2 style="font-family:Chaparral Pro Light;">Hello GeeksforGeeks.</h2> <h3 style="font-size:20px;">Hello GeeksforGeeks.</h3> <h2 style="color:#8CCEF9;">Hello GeeksforGeeks.</h2> <h2 style="text-align:center;">Hello GeeksforGeeks.</h2> </body> </html>
Salida :
atributo de estilo
Atributo lang de HTML : el idioma se declara con el atributo lang. Declarar un idioma puede ser importante para las aplicaciones de accesibilidad y los motores de búsqueda.
Ejemplo: Este ejemplo explica los atributos HTML lang que especifican el idioma de la página HTML.
HTML
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
Este artículo es una contribución de Chinmoy Lenka . Si te gusta GeeksforGeeks y te gustaría contribuir, también puedes escribir un artículo usando write.geeksforgeeks.org o enviar tu artículo por correo a review-team@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.
Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA