En este tercera entrega del diccionario de HTML veremos uno de los cimientos clave del Lenguaje de Marcado de Hipertexto. Sí, estamos hablando de los atributos.
Veremos el potencial que tienen estos engranajes para personalizar y dar funcionalidad a los elementos en HTML.
Además, veremos como se colocan (y donde) con algunos ejemplos.
Voy a dejar el vídeo también de la serie, donde lo explico también de (de forma muy rápida).
¿Qué es un atributo en HTML?
Los atributos en HTML proporcionan información adicional sobre los elementos. Un atributo siempre tiene dos partes: el nombre y el valor.
El nombre del atributo indica qué tipo de información adicional se está proporcionando, y el valor del atributo es la información adicional específica.
Los atributos siempre se incluyen en la etiqueta de inicio de un elemento HTML y tienen la siguiente sintaxis:
nombre_del_atributo="valor_del_atributo"Atributos globales
Quizás has oído hablar de los atributos globales en HTML. Estos atributos se pueden aplicar a cualquier elemento. Aquí tienes algunos ejemplos.
- accesskey: Especifica una tecla de acceso directo para activar/focalizar el elemento.
- class: Especifica una o más clases para el elemento.
- contenteditable: Especifica si el contenido del elemento debe ser editable o no.
- data-*: Utilizado para almacenar datos personalizados privados para la página web o aplicación.
- dir: Especifica la dirección del texto para el contenido en un elemento.
- draggable: Especifica si un elemento es arrastrable o no.
- hidden: Especifica si el elemento aún no es, o ya no es, relevante.
- id: Especifica un id único para un elemento.
- lang: Especifica el idioma del contenido del elemento.
- spellcheck: Especifica si el elemento debe tener su ortografía y gramática comprobadas o no.
- style: Especifica un estilo en línea para un elemento.
- tabindex: Especifica el orden de tabulación de un elemento.
- title: Especifica información adicional sobre un elemento.
Los atributos globales son muy útiles porque ofrecen una gran funcionalidad y control sobre cómo se comportan y se presentan los elementos en HTML.
Por ejemplo, en el caso de la etiqueta abbr solo puede contener atributos globales.
¿Dónde se colocan los atributos HTML?
Los atributos HTML se colocan dentro de las etiquetas de inicio HTML. Los atributos generalmente aparecen como pares nombre-valor y están escritos dentro de la etiqueta de inicio, justo después del nombre de la etiqueta.
Aquí tienes un ejemplo con la etiqueta de imagen (<img>):
<a href="https://www.google.com">Visitar Google</a>En este caso, href es un atributo que se coloca dentro de la etiqueta de inicio <a>. El valor de este atributo ("https://www.google.com") indica la URL a la que se dirige el enlace cuando se hace clic en «Visitar Google».
Ejemplo de Atributo en HTML
Veamos un ejemplo sobre cómo se coloca un atributo en HTML en una imagen <img>. Normalmente cuando queramos colocar una imagen en nuestra página utilizaremos atributos para añadir características y personalizar este elemento.
Ejemplo:
<img src="imagen.jpg" alt="Una descripción de la imagen" width="500" height="600">En este ejemplo, «src», «alt», «width» y «height» son todos atributos de la etiqueta «img»:
- El atributo «src» especifica la ubicación (URL) de la imagen.
- El atributo «alt» proporciona una descripción de la imagen, que se muestra si la imagen no se puede cargar, y también es útil para la accesibilidad.
- Los atributos «width» y «height» especifican el ancho y la altura de la imagen, respectivamente.
Cada uno de estos atributos tiene un valor correspondiente («imagen.jpg», «Una descripción de la imagen», «500», «600») que proporciona la información adicional.
Lista de atributos ¿Cuántos atributos hay en html?
Existen un montón de atributos en HTML y encima, de tanto en tanto van saliendo de nuevos. Así que hacer una lista de todos los atributos en HTML es complicado. Así que a continuación, he creado una lista de los atributos más comunes en HTML.
| Atributo | Descripción | Ejemplo de Uso |
| class | Especifica una o más clases para un elemento. | <div class=»intro»> |
| id | Especifica un ID único para un elemento. | <div id=»header»> |
| style | Aplica estilos CSS directamente a un elemento. | <p style=»color:red;»> |
| src | Especifica la URL del recurso externo. | <img src=»image.jpg»> |
| alt | Proporciona un texto alternativo para una imagen. | <img src=»image.jpg» alt=»Description of image»> |
| href | Especifica la URL del enlace. | <a href=»https://example.com»>Visit our site</a> |
| width | Especifica el ancho del elemento. | <img src=»image.jpg» width=»500″> |
| height | Especifica la altura del elemento. | <img src=»image.jpg» height=»500″> |
| value | Especifica el valor inicial de un control de formulario. | <input type=»text» value=»default text»> |
| name | Da un nombre al elemento para su referencia. | <input type=»text» name=»username»> |
| placeholder | Proporciona un texto de sugerencia en un campo de entrada. | <input type=»text» placeholder=»Enter your name»> |
| disabled | Deshabilita un elemento de entrada. | <input type=»text» disabled> |
| readonly | Hace que un campo de entrada sea de solo lectura. | <input type=»text» readonly> |
| maxlength | Especifica la longitud máxima de un campo de entrada. | <input type=»text» maxlength=»10″> |
| checked | Indica si un elemento de checkbox o radio debe ser seleccionado. | <input type=»checkbox» checked> |
| selected | Define una opción preseleccionada en un elemento de selección. | <option value=»option1″ selected> |
| multiple | Permite seleccionar varias opciones en un select. | <select multiple> |
| autofocus | Especifica que un campo de entrada debe obtener el foco al cargar la página. | <input type=»text» autofocus> |
| required | Especifica que un campo de entrada debe ser llenado antes de enviar el formulario. | <input type=»text» required> |
| pattern | Especifica una expresión regular contra la cual se valida el valor de entrada. | <input type=»text» pattern=»[a-zA-Z0-9]»> |
Diferencia entre etiqueta y atributos en HTML
Si estás empezando a aprender este lenguaje de marcado es posible que te cueste un poco diferenciar una etiqueta de un atributo. Aquí va una pequeña descripción de cada una de ellas, para que veas la diferencia.
De hecho, la diferencia entre etiqueta y atributo es realmente notoria.
Las etiquetas HTML definen la estructura y el tipo de contenido en una página web. Los atributos HTML proporcionan información adicional y personalizan las etiquetas. En resumen, las etiquetas establecen qué es y donde acaba cada elemento, y los atributos detallan características específicas de ese elemento.
Y bueno, como dirián los Looney Tunes, “Eso es todo amigos”.
Ya sabes que si tienes cualquier pregunta o cualquier sugerencia puedes dejarla en los comentarios y nos vemos en la próxima lección ¡Bye!