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 href atributo especifica la URL de la página a la que va el enlace:

<a href="https://www.eenternet.com">Visit eenternet</a>


Aprenderá más sobre 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 mostrará:

<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.eenternet.com/images/img_girl.jpg».

Notas: Las imágenes externas pueden estar protegidas por derechos de autor. Si no obtiene permiso para usarlo, puede estar violando las leyes de derechos de autor. Además, no puede controlar las imágenes externas; se puede quitar o cambiar de repente.

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, será relativa a la página actual. Ejemplo: src = «img_girl.jpg». Si la URL comienza con una barra, será relativa al dominio. Ejemplo: src = «/ images / img_girl.jpg».

Sugerencia: casi siempre es mejor usar URL relativas. No se romperán si cambia de dominio.


Los atributos de ancho y alto

La <img>etiqueta también debe contener los atributos widthheight, que especifican el ancho y el alto de la imagen (en píxeles):

<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 alguna razón no se puede mostrar. Esto puede deberse a una conexión lenta, a un error en el srcatributo o si el usuario utiliza un lector de pantalla.

<img src="img_girl.jpg" alt="Girl with a jacket">

Ejemplo

Vea qué pasa si intentamos mostrar una imagen que no existe:

<img src="img_typo.jpg" alt="Girl with a jacket">

Aprenderá más sobre 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>

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ís 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>

El atributo del título

El titleatributo 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>


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 puede escribir con 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.

Conceptos Relacionados