HTML Atributos
Los atributos HTML proporcionan información adicional sobre los elementos HTML.
HTML Atributos
- 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 normalmente vienen en pares de nombre/valor como: name="value"
El atributo href
La etiqueta <a> define un hipervínculo. El atributo href especifica la URL de la página a la que va el enlace:
Aprenderá más sobre los enlaces en nuestro capítulo Vínculos HTML..
El atributo src
La etiqueta <img> se utiliza para incrustar una imagen en una página HTML. El atributo src especifica la ruta a la imagen que se mostrará:
Hay dos formas de especificar la URL en el atributo src:
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 tener derechos de autor. Si no obtiene permiso para usarlo, es posible que esté infringiendo las leyes de derechos de autor. Además, no puedes controlar las imágenes externas; se puede eliminar 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 barra, será relativa a la página actual. Ejemplo: src="img_girl.jpg". Si la URL comienza con una barra diagonal, será relativa al dominio. Ejemplo: src="/images/img_girl.jpg".
Consejo: Casi siempre es mejor utilizar URL relativas. No se romperán si cambias de dominio.
Los atributos de ancho y alto
La etiqueta <img> también debe contener el width y el atributos height, que especifican el ancho y alto de la imagen (en píxeles):
El atributo alt
El atributo alt requerido para la etiqueta <img> especifica un texto alternativo para una imagen, si Por alguna razón, la imagen no se puede mostrar. Esto puede deberse a una conexión lenta, a un error en el atributo src o si el usuario utiliza un lector de pantalla.
Ejemplo
Mira qué pasa si intentamos mostrar una imagen que no existe:
<img src="img_typo.jpg" alt="Girl with a jacket">
Inténtalo tú mismo »
Aprenderá más sobre imágenes en nuestro capítulo Imágenes HTML..
El atributo de style
El atributo style se utiliza para agregar estilos a un elemento, como color, fuente, tamaño y más.
Aprenderá más sobre estilos en nuestro capítulo Estilos HTML.
El atributo de lang
Siempre debes incluir el atributo lang dentro de la etiqueta <html>, 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ís también se pueden agregar al código de idioma en el atributo lang. Entonces, los dos primeros caracteres definen el idioma de la página HTML y los dos últimos definen el país.
El siguiente ejemplo especifica el inglés como idioma y los Estados Unidos como país.:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Puedes ver todos los códigos de idioma en nuestra Referencia de códigos de idioma HTML.
El atributo del título
El atributo title define 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:
Sugerimos utilizar 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 title o TITLE.
Sin embargo, el 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, el W3C recomienda comillas en HTML y exige comillas 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/>Visita nuestro tutorial HTML</a>
A veces hay que utilizar comillas. Este ejemplo no mostrará el atributo de título correctamente porque contiene un espacio:
En W3Schools siempre utilizamos comillas alrededor de los valores de los atributos.
¿Comillas simples o dobles?
Las comillas dobles alrededor de los valores de los atributos son las más comunes en HTML, pero también se pueden utilizar comillas simples.
En algunas situaciones, cuando el valor del atributo contiene comillas dobles, es necesario utilizar comillas simples:
<p title='John "ShotGun" Nelson'>
O viceversa:
<p title="John 'ShotGun' Nelson">
Inténtalo tú mismo »
Resumen del capítulo
- Todos los elementos HTML pueden tener atributos
- El atributo
hrefde<a>especifica la URL de la página a la que va el enlace - El atributo
srcde<img>especifica la ruta a la imagen que se mostrará - Los atributos
widthyheightde<img>proporcionar información sobre el tamaño de las imágenes - El atributo
altde<img>proporciona un texto alternativo para una imagen - El atributo
stylese utiliza para agregar estilos a un elemento, como color, fuente, tamaño y más - El atributo
langde la etiqueta<html>declara el idioma de la página web - El atributo
titledefine información adicional sobre un elemento
HTML Ejercicios
HTML Referencia de atributos
Una lista completa de todos los atributos para cada elemento HTML se incluye en nuestra: Referencia de atributos HTML.
