Id en HTML
Tras class, id nombra un solo elemento.
Por qué importan los nombres únicos
Los saltos asumen una sola coincidencia.
Respuesta directa
id="faq" una vez. href="#faq". CSS #faq. No id="#faq". Para estilos compartidos usa class.
📊 id versus class
| Feature | id | class |
|---|---|---|
| Uniqueness | One per page (ideally) | Many elements may share |
| HTML attribute | id="faq" (no #) | class="tip" (no .) |
| CSS selector | #faq | .tip |
| Common uses | Bookmarks, unique hooks, script targets | Reusable styles and groups |
Enlace fragment a un encabezado
Enlace arriba, id abajo.
Unique id and fragment link
html<p><a href="#faq">Jump to FAQ</a></p>
<h2 id="faq">FAQ</h2>
<p>Answers go here.</p>
Lectura del fragment
-
solo en el enlace
- nombre sin # en el atributo
Gancho CSS único con #id
Un panel destacado — con mesura.
Unique id with CSS
html<div id="promo">
<h2>Limited offer</h2>
<p>One panel, one unique hook.</p>
</div>
<style>
#promo { border: 2px solid #0a7; padding: 12px; }
</style>
Lectura del estilo único
-
promo en CSS
- sin # en el atributo
Elegir id o class
¿Varios elementos? class. ¿Un objetivo? id.
Práctica
- encabezado con id
- enlace # y saltar
- quitar duplicados
- class para tips
Errores fáciles
- id duplicado
-
en el atributo
- id para cada estilo compartido
Resumen
- id único
-
en href/CSS
- class para compartir
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior