En HTML, los atributos proveen información adicional acerca de los elementos HTML.
Atributos HTML
- Todos los elementos HTML pueden poseer atributos.
- Dichos atributos proveen información adicional acerca de los elementos.
- Los atributos siempre son incluidos en las etiquetas de apertura de los elementos.
- Éstos son nombrados mediante un código par=valor, por ejm, nombre=»Francisco».
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.
Ejm
<a href="https://sutilweb.eu">Visita Sutil Web</a>
El atributo src
La etiqueta <img> se usa para incrustar una imagen en una página HTML. El atributo src especifica la ruta a la imagen que se mostrará.
Ejm
<img src="img_girl.jpg">
Hay dos formas de especificar la URL en el atributo src:
- URL absoluta: enlaces a una imagen externa alojada en otro sitio web. Ejemplo: src = «https://sutilweb.com/images/img_girl.jpg».
Nota: Las imágenes externas pueden estar protegidas por derechos de autor. Si no obtienes permiso para usarlo, puedes estar violando las leyes de derechos de autor. Además, no puedes controlar las imágenes externas, se pueden quitar o cambiar de repente.
- 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».
Nota: casi siempre es mejor usar URL relativas. No se romperán si cambia de dominio.
Los atributos width y height
La etiqueta <img> también debe contener los atributos width y height, que especifican el ancho y alto de la imagen (en píxeles).
Ejm
<img src="img_girl.jpg" width="500" height="600">
El atributo alt
El atributo alt para la etiqueta <img> especifica un texto alternativo para una imagen, si la imagen por alguna razón no puede ser mostrada. Esto puede ser debido a una conexión lenta, o a un error en el atributo src, o si el usuario usa un lector de pantalla.
Ejm
<img src="img_girl.jpg" alt="Girl with a jacket">
El atributo style
El atributo style es usado para añadir estilos a un elemento, como el color, fuente, tamaño…
Ejm
<p style="color:red;">Esto es un párrafo en color rojo</p>
El atributo lang
Siempre se debe 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.
Ejm
<!DOCTYPE html> <html lang="es"> <body> ... </body> </html>
Los códigos de país también se pueden agregar al código de idioma en el atributo lang. De manera que 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.
Ejm
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
El atributo title
El atributo title define información extra acerca del elemento. El valor del atributo title se mostrará como información sobre herramientas cuando pase el mouse sobre el elemento.
Ejm
<p title="Soy un título">Esto es un párrafo.</p>
Atributos en minúsculas y entre comillas
Sugerimos siempre usar atributos en minúscula y entre comillas para un mejor entendimiento del código y para que supere otros estándares mas extrictos como son XHTML. Se pueden utilizar comillas simples o dobles.