Los atributos HTML proporcionan información adicional a los elementos HTML.
¿Qué son los atributos en HTML?
Todos los elementos HTML pueden tener atributos
Los atributos proveen información adicional de los elementos
Los atributos siempre se especifican en la etiqueta de inicio
Los atributos usualmente vienen en par 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:
Ejemplo:
<a href="/signup">Try Notion free</a>
El atributo src
La etiqueta <img> se utiliza para incrustar una imagen en una página HTML. El atributo src especifica la ruta de la imagen que se mostrará:
Ejemplo:
<img src="">
Hay dos formas de especificar la URL en el atributo src:
URL Absoluta - enlace a una imagen externa alojada en otro sitio web (ej.
src="https://notion.so/images/girl-with-notebooks.png")Nota: Las imágenes externas pueden estar protegidas por derechos de autor. Si no tienes permiso para usarlo, es posible que estés violando las leyes de derechos de autor. Además, no puedes controlar imágenes externas; se pueden quitar o cambiar repentinamente.
URL Relativa - enlace a una imagen alojada dentro del 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 (ej.
src="girl-with-notebooks.png". Si la URL comienza con una barra inclinada, será relativa al dominio (ej.src="/images/girl-with-notebooks.png")Sugerencia: Casi siempre es mejor usar URL relativas. No se perderán si cambias de dominio.
El atributo alt
El atributo alt es requerido para la etiqueta <img> que especifica un texto alternativo para una imagen, si por algún motivo no se puede mostrar. Esto puede deberse a una conexión lenta, a un error en el atributo src, o si el usuario usa un lector de pantalla.
Ejemplo:
<img src="girl-with-notebooks" alt="A girl with notebooks">
El atributo style
El atributo style se usa para agregar estilos a un elemento, como color, fuente, tamaño y más.
Ejemplo:
<p style="color: black;">Free for individual students & educators</p>
El atributo 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:
<html lang="en">
Los códigos de países 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 caracteres definen el país.
<html lang="en-us">
El atributo title
El atributo title define información adicional sobre un elemento.
El valor del atributo title se mostrará como información cuando pase el mouse sobre el elemento:
Ejemplo:
<h1 title="Notion for education">Notion for education</h1>
Sugerencia: siempre utilice atributos en minúsculas
El estándar HTML no requiere nombres de atributos en minúsculas.
El atributo title (y todos los demás atributos) se pueden escribir en mayúsculas o minúsculas como title o TITLE.
Sin embargo, la W3C recomienda atributos en minúsculas en HTML.
Sugerencia: siempre utilice comillas en los valores de los atributos
El estándar HTML no obliga comillas entre los valores de los atributos.
Sin embargo, la W3C recomienda comillas en HTML.
Correcto:
<a href="https://notion.so/signup">Try Notion free</a>
Incorrecto:
<a href=https://notion.so/signup>Try Notion free</a>
¿Comilla simple o doble?
Las comillas dobles alrededor de los valores del atributo son las más comunes en HTML, pero también puedes usar comillas simples.
En algunas situaciones, cuando el propio valor del atributo contiene comillas dobles, es necesario utilizar comillas simples:
Ejemplo:
<p title='Juan "Developer" Perez'>
O al revés:
<p title="Juan'Developer' Perez">
Resumen
Todos los elementos (<a>, <img>, etc) HTML pueden tener atributos (title, href, src, etc), estos atributos proveen información adicional sobre los elementos.
Traducido con 💚 desde W3Schools.com