0Pricing
Web Accessibility Academy · Lección

Un h1 por página: nombre el tema principal

Proporcione a cada página un único encabezado de nivel superior claro.

Un h1 por página: nombre el tema principal es una lección gratuita de Web Accessibility 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 Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

The Page Title You Hear

The h1 is your page's headline. Screen reader users often jump straight to it to learn what this page is actually about. 🔎

One Main Topic

A page is about one main thing, so it gets one h1. Think of it as the title on a book cover, not a chapter heading.

<h1>Your Order Summary</h1>

h1 Is Not About Size

Pick h1 for meaning, never for looking big. If you want smaller text, style it with CSS and keep the heading level correct.

It Names, Not Decorates

A good h1 describes the content below it. Reading the h1 alone should tell a user roughly what they will find on this page.

Match the Tab Title

Your h1 should echo the browser tab title. When both agree, users feel confident they landed on the right page.

<title>Your Order Summary - Shop</title>
<h1>Your Order Summary</h1>

Not the Logo

Your site name in the corner usually is not the page topic. The h1 belongs to this page's content, not your brand logo. 🏷️

Why One, Not Many

Several h1 tags blur the outline, so users cannot tell the real topic from a section. One clear top level keeps the page focused.

Where It Lives

Place the h1 high in your main content, before the sections it introduces. It sets the stage for everything that follows.

<main>
  <h1>Annual Report 2025</h1>
  <h2>Highlights</h2>
</main>

Never Skip Straight to h2

Starting a page at h2 leaves the outline without a root. Give the page its single h1 first, then nest sections below it.

Keep It Honest

Write the h1 in plain words a stranger would understand. Skip clever puns that hide what the page really does.

Empty h1 Is a Trap

An h1 that wraps only an image or icon may read as nothing. Give it real text, even if you hide that text visually.

Quick Check

How many h1 elements should a typical page have?

Recap

You learned the h1 names a page's one main topic, sits high in the content, and is chosen for meaning over size. One page, one h1. ✅

Preguntas frecuentes

¿La lección «Un h1 por página: nombre el tema principal» es gratis?

Sí — el texto completo de «Un h1 por página: nombre el tema principal» 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 Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Un h1 por página: nombre el tema principal»?

Proporcione a cada página un único encabezado de nivel superior claro. Practicas Web Accessibility 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 Web Accessibility Academy?

No se requiere experiencia previa. Web Accessibility 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 «Un h1 por página: nombre el tema principal»?

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 Web Accessibility Academy?

Sí. Cada lección de Web Accessibility 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. Un h1 por página: nombre el tema principal
  2. Niveles de anidamiento sin saltos
  3. Los encabezados son navegación, no solo texto grande
  4. Audite la estructura de una página de oído
← Volver a Web Accessibility Academy