Los atributos proporcionan información adicional sobre elementos HTML.
- Todos los elementos HTML pueden tener atributos
- Los atributos proporcionan información adicional sobre un elemento
- Los atributos siempre se especifican en la etiqueta de inicio
- Los atributos generalmente vienen en pares nombre / valor como: nombre = "valor"
Los enlaces HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en el atributo href
<a href="https://kikopalomares.com/">Esto es un enlace</a>
Las imágenes HTML se definen con la etiqueta <img>.
La ruta de dónde se encuentra la imagen se especifica en el atributo src.
<img src="https://kikopalomares.com/kikopalomares.jpg">
Las imágenes HTML también tienen atributos de ancho (width) y alto (height).
El ancho y la altura se especifican en píxeles de forma predeterminada; entonces width="100" significa 100 píxeles de ancho.
<img src="https://kikopalomares.com/kikopalomares.jpg" width="100" height="200">
El atributo alt especifica un texto alternativo que se utilizará, si no se puede mostrar una imagen.
Los lectores de pantalla pueden leer el valor del atributo alt. De esta manera, alguien "escucha" la página web, como una persona con discapacidad visual puede "escuchar" el elemento.
El atributo alt también es útil si la imagen no se puede mostrar (por ejemplo, si no existe)
<img src="https://kikopalomares.com/kikopalomares.jpg" alt="Foto de Kiko">
Se usa para especificar el estilo de un elemento, como color, fuente, tamaño, etc.
<p style="color:red">Esto es un párrafo</p>
El idioma del documento puede declararse en la etiqueta <html>.
El idioma se declara con el atributo lang.
Declarar un idioma es importante para las aplicaciones de accesibilidad (lectores de pantalla) y los motores de búsqueda.
<!DOCTYPE html>
<html lang="es-ES">
<body>
</body>
</html>
Aquí, se agrega un atributo de título al elemento <p>. El valor del atributo title se mostrará como información sobre el párrafo cuando pase el mouse por encima.
<p title="¡Soy un tooltip!">Esto es un párrafo</p>
El estándar HTML5 no requiere nombres de atributo en minúsculas.
El atributo title se puede escribir con mayúsculas o minúsculas como title o TITLE.
Por tema de buenas prácticas es mejor usar siempre minúsculas.
El estándar HTML5 no requiere comillas alrededor de los valores de los atributos.
El atributo href se puede escribir sin comillas.
A veces es necesario usar comillas. Por ejemplo no mostrará el atributo de title correctamente si hay espacios en el valor.
<!-- MAL -->
<a href=https://kikopalomares.com/>
<!-- BIEN -->
<a href="https://kikopalomares.com/">
<!-- No funcionará porque hay un espacio -->
<p title=Kiko Palomares>
Las comillas dobles alrededor de los valores de los atributos son las más comunes en HTML, pero también se pueden usar comillas simples.
En algunas situaciones, cuando el valor del atributo contiene comillas dobles, es necesario utilizar comillas simples.
<p title='Kiko "Programador" Palomares'>
<p title="Kiko 'Programador' Palomares">
- Todos los elementos HTML pueden tener atributos
- El atributo title proporciona información adicional y se muestra cuando se pasa el ratón por encima del elemento
- El atributo href proporciona información de la dirección del enlace
- Los atributos de width y height proporcionan información sobre el tamaño de las imágenes
- El atributo alt proporciona texto para lectores de pantalla
- Es recomendable usar siempre nombres de atributo en minúsculas
- Es recomendable siempre usar comillas
