Los atributos HTML proporcionan información o reglas adicionales sobre los elementos 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 normalmente vienen en pares nombre/valor como: nombre=»valor»
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:
<a href="https://academiadesarrolloweb.com/">Visita Academia Desarrollo Web</a>
href 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á:
<img src="img_girl.jpg">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.
Anteriormente vimos este ejemplo en HTML Basics:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>
<h1>Hola, mundo!</h1>
<p>¡Este es mi primer párrafo en HTML!</p>
<img src="mi-imagen.jpg" alt="Descripción de la imagen">
</body>
</html>En este ejemplo, la etiqueta <img> se utiliza para insertar una imagen en la página web. El atributo src especifica la ubicación de la imagen en una ruta de un archivo en tu computadora. El atributo alt proporciona una descripción de la imagen, que se mostrará si la imagen no se puede cargar correctamente o si el usuario utiliza un lector de pantalla.
Los atributos de ancho y alto.
La etiqueta <img> también debe contener los atributos width y height, que especifican el ancho y el alto de la imagen (en píxeles):
<img src="img_girl.jpg" width="500" height="600">En el caso de ejemplo el archivo «mi-imagen.jpg» tiene una medida de 555 x 640 píxeles, de modo que esta es la dimensión que debemos establecer en el atributo de la etiqueta. En caso contrario la imagen podria deformarse o verse desproporcionada al desplegarse en el explorador.
El atributo de estilo.
El atributo style se utiliza para agregar estilos a un elemento, como color, fuente, tamaño y más.
<p style="color:red;">This is a red paragraph.</p>
Aprenderá más sobre estilos en nuestro capítulo Estilos HTML y cuando entremos de lleno a CSS.
El atributo de idioma.
Siempre debes incluir el atributo lang dentro de la etiqueta <html>, para declarar el idioma de la página Web.
HTML lang es básicamente una etiqueta meta o meta tag que se encarga de indicar el idioma en el que está escrita una página. Su aplicación en el código es importante por varias razones: en primer lugar, facilita que los agentes muestren correctamente el contenido textual de un sitio web.
En segundo lugar, la especificación del idioma en el código HTML ayuda a los motores de búsqueda a mostrar los resultados correctos a los usuarios y usuarias de diferentes países.
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 Estados Unidos como país:
<!DOCTYPE html>
<html lang="en-us">
<body>
...
</body>
</html>El siguiente ejemplo especifica el español como idioma y España como país:
<!DOCTYPE html>
<html lang="es-es">
<body>
...
</body>
</html>Si algunas partes del texto de una página están escritas en idiomas diferentes, el atributo HTML Lang debe añadirse a cualquier elemento que contenga dichas partes en lengua extranjera.
Nota: Para las páginas que se entregan como XML, se debe emplear el atributo xml: lang.
Los motores de búsqueda también entienden la información sobre el idioma que se encuentra en los metas atributos de una página, por ejemplo:
<meta http-equiv = "content-language" content = "en">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:
<p title="I'm a tooltip">This is a paragraph.</p>
El estándar HTML no requiere nombres de atributos en minúsculas.
El atributo de título (y todos los demás atributos) se puede 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.
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.
¿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">Resumen
- 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
srcde<img>especifica la ruta a la imagen que se mostrará. - Los atributo atributos
widthyheightde<img>proporcionan 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.