Atributos HTML
Los atributos HTML proporcionan información adicional sobre los elementos HTML.
Atributos HTML
- Todos los elementos HTML pueden tener atributos
- Los atributos proporcionan información adicional sobre los elementos .
- Los atributos siempre se especifican en la etiqueta de inicio
- Los atributos generalmente vienen en pares de nombre/valor como: nombre="valor"
El atributo href
La <a>etiqueta define un hipervínculo. El
hrefatributo especifica la URL de la página a la que va el enlace:
Ejemplo
<a href="https://www.w3schools.com">Visit W3Schools</a>
Aprenderá más acerca de los enlaces en nuestro capítulo Enlaces HTML .
El atributo src
La <img>etiqueta se utiliza para incrustar una imagen en una página HTML. El srcatributo especifica la ruta a la imagen que se va a mostrar:
Ejemplo
<img src="img_girl.jpg">
Hay dos formas de especificar la URL en el src
atributo:
1. URL absoluta : enlaces a una imagen externa alojada en otro sitio web. Ejemplo: src="https://www.w3schools.com/images/img_girl.jpg" .
Notas: las imágenes externas pueden estar protegidas por derechos de autor. Si no obtiene permiso para usarlo, es posible que esté violando las leyes de derechos de autor. Además, no puede controlar imágenes externas; se puede quitar o cambiar repentinamente.
2. URL relativa : enlaces a una imagen alojada en el sitio web. Aquí, la URL no incluye el nombre de dominio. Si la URL comienza sin una barra inclinada, será relativa a la página actual. Ejemplo: src="img_girl.jpg". Si la URL comienza con una barra inclinada, será relativa al dominio. Ejemplo: src="/images/img_girl.jpg".
Sugerencia: casi siempre es mejor usar URL relativas. No se romperán si cambias de dominio.
Los atributos de ancho y alto
La <img>etiqueta también debe contener los
atributos widthy
height, que especifican el ancho y el alto de la imagen (en píxeles):
Ejemplo
<img src="img_girl.jpg" width="500" height="600">
El atributo alt
El altatributo requerido para la <img>
etiqueta especifica un texto alternativo para una imagen, si la imagen por algún motivo no se puede mostrar. Esto puede deberse a una conexión lenta, a un error en el srcatributo, o si el usuario usa un lector de pantalla.
Ejemplo
<img src="img_girl.jpg" alt="Girl
with a jacket">
Ejemplo
Vea lo que sucede si intentamos mostrar una imagen que no existe:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Aprenderá más sobre las imágenes en nuestro capítulo Imágenes HTML .
El atributo de estilo
El styleatributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más.
Ejemplo
<p style="color:red;">This is a red paragraph.</p>
Aprenderá más sobre estilos en nuestro capítulo Estilos HTML .
El atributo lang
Siempre debe incluir el langatributo dentro de la <html>etiqueta, para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.
El siguiente ejemplo especifica el inglés como idioma:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Los códigos de países también se pueden agregar al código de idioma en el lang
atributo. Entonces, los dos primeros caracteres definen el idioma de la página HTML y los dos últimos caracteres definen el país.
El siguiente ejemplo especifica inglés como idioma y Estados Unidos como país:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Puede ver todos los códigos de idioma en nuestra Referencia de código de idioma HTML .
El atributo del título
El titleatributo define alguna información adicional sobre un elemento.
El valor del atributo de título se mostrará como información sobre herramientas cuando pase el mouse sobre el elemento:
Ejemplo
<p title="I'm a tooltip">This is a paragraph.</p>
Sugerimos: Utilice siempre atributos en minúsculas
El estándar HTML no requiere nombres de atributos en minúsculas.
El atributo de título (y todos los demás atributos) se pueden escribir en mayúsculas o minúsculas como título o TÍTULO .
Sin embargo, W3C recomienda atributos en minúsculas en HTML y exige atributos en minúsculas para tipos de documentos más estrictos como XHTML.
En W3Schools siempre usamos nombres de atributos en minúsculas.
Sugerimos: Citar siempre los valores de los atributos
El estándar HTML no requiere comillas alrededor de los valores de los atributos.
Sin embargo, W3C recomienda citas en HTML y exige citas para tipos de documentos más estrictos como XHTML.
Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Malo:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>A veces hay que usar comillas. Este ejemplo no mostrará el atributo de título correctamente, porque contiene un espacio:
Ejemplo
<p
title=About W3Schools>
En W3Schools siempre usamos comillas alrededor de los valores de los atributos.
¿Comillas simples o dobles?
Las comillas dobles alrededor de los valores de atributo son las más comunes en HTML, pero también se pueden usar comillas simples.
En algunas situaciones, cuando el propio valor del atributo contiene comillas dobles, es necesario utilizar comillas simples:
<p title='John "ShotGun" Nelson'>
O viceversa:
<p title="John 'ShotGun' Nelson">
Resumen del capítulo
- Todos los elementos HTML pueden tener atributos
- El
hrefatributo de<a>especifica la URL de la página a la que va el enlace - El
srcatributo de<img>especifica la ruta a la imagen que se mostrará - Los atributos
widthy de proporcionan información sobre el tamaño de las imágenes.height<img> - El
altatributo de<img>proporciona un texto alternativo para una imagen. - El
styleatributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más - El
langatributo de la<html>etiqueta declara el idioma de la página web. - El
titleatributo define alguna información adicional sobre un elemento.
Ejercicios HTML
Referencia de atributos HTML
Una lista completa de todos los atributos para cada elemento HTML se incluye en nuestra: Referencia de atributos HTML .