Atributos HTML

Aprende a configurar elementos con atributos: id, class, title, lang y más.

📖

Teoría

Los atributos agregan información o configuración a los elementos HTML. Se escriben dentro de la etiqueta de apertura con el formato:

<etiqueta atributo="valor">

Los atributos más importantes para empezar son:

id → Identificador único en la página (solo uno por id)

class → Clase reutilizable para aplicar estilos CSS

title → Texto emergente al pasar el mouse

lang → Idioma del contenido

html

<!-- id: identificador único -->
<h1 id="titulo-principal">Mi Portafolio</h1>

<!-- class: puede repetirse en múltiples elementos -->
<p class="destacado">Este párrafo tiene estilo especial.</p>
<p class="destacado">Este también.</p>

<!-- title: tooltip al pasar el mouse -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- Múltiples clases separadas por espacio -->
<div class="tarjeta destacado grande">Contenido</div>

<!-- Atributos booleanos (no necesitan valor) -->
<input type="text" disabled>
<input type="checkbox" checked>

🚀id vs class

Regla de oro: usa id cuando el elemento es único en la página (el encabezado principal, el formulario de login). Usa class cuando varios elementos comparten estilos o comportamiento.

⚡

Ejercicio práctico

🎯 Tu misión

Toma una página HTML básica y agrega atributos significativos: id único para el encabezado principal, clases para agrupar elementos similares, y title para abreviaciones.

Vista previa

←Capítulo anterior

Siguiente capítulo→