0Pricing
HTML Academy · Lección

id, class, style y title

Aplique los principales atributos globales a cualquier elemento HTML.

id, class, style y title es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Atributos globales

Los atributos globales se pueden aplicar a cualquier elemento HTML:

  • id — identificador único
  • class — una o varias clases de CSS
  • style — CSS en línea
  • title — texto de información sobre herramientas
  • Y muchos más: lang, hidden, tabindex, data-*...

El atributo id

El atributo id asigna un identificador único a un elemento:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Usos de id

El atributo id tiene varios usos:

  • Selección mediante CSS: #hero-banner { ... }
  • Selección mediante JavaScript: document.getElementById('signup-form')
  • Navegación mediante fragmentos: <a href="#installation">
  • Etiquetado ARIA: aria-labelledby="modal-title"

El atributo class

El atributo class asigna una o varias clases de CSS:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id frente a class

Cuándo utilizar cada uno:

  • id — un elemento específico de la página
  • class — un patrón de estilo aplicado a varios elementos
<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

El atributo style

El atributo style añade CSS en línea:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Cuándo utilizar style en línea

El estilo en línea es aceptable en estos casos:

  • Valores dinámicos establecidos mediante JavaScript
  • Valores que no se pueden conocer al escribir el CSS (colores y anchos definidos por el usuario)
  • HTML de correo electrónico (los clientes de correo eliminan el CSS externo)

No utilice style para decisiones de presentación estáticas; estas deben definirse en CSS.

El atributo title

El atributo title proporciona texto de información sobre herramientas al pasar el cursor:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

Limitaciones de accesibilidad de title

El atributo title presenta importantes problemas de accesibilidad:

  • No es accesible mediante la navegación con teclado
  • No se muestra en pantallas táctiles
  • El comportamiento de los lectores de pantalla es incoherente
  • No coloque nunca información esencial únicamente en title

Utilice aria-label o texto visible para la información importante.

Especificidad: id frente a class y style en línea

Especificidad de CSS, de menor a mayor:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

Convenciones para nombrar class

Convenciones populares para nombrar class:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Comprobación rápida

¿Cuál es la regla principal del atributo id?

Repaso: id class style title

Atributos globales fundamentales:

  • id — único por página; se utiliza para CSS, JavaScript, fragmentos y ARIA
  • class — reutilizable; varias clases separadas por espacios
  • style — CSS en línea (utilícelo con moderación; prefiera CSS externo)
  • title — información sobre herramientas; no es accesible para usuarios de teclado o de pantallas táctiles
  • La especificidad de id es mayor que la especificidad de class en CSS

Preguntas frecuentes

¿La lección «id, class, style y title» es gratis?

Sí — el texto completo de «id, class, style y title» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «id, class, style y title»?

Aplique los principales atributos globales a cualquier elemento HTML. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «id, class, style y title»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. id, class, style y title
  2. El atributo hidden
  3. tabindex y accesskey
  4. Atributos de datos personalizados data-*
← Volver a HTML Academy