beta v0.3.0 GitHub

Elementos HTML

Estructura de página

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Construye los bloques principales de una página: regiones, encabezados y las secciones entre ellos. Parecen cajas sencillas; su valor está en lo que comunican a las tecnologías de asistencia.

`<address>`

MDN

Cómo contactar con quienes están detrás del artículo más cercano o de toda la página: una dirección de correo, un teléfono o un enlace a un perfil. No se usa para direcciones postales mencionadas en el texto. Los navegadores lo muestran en cursiva; LUZ lo pone en redonda y con el color secundario.

Ana García
Calle Mayor 1, Cádiz
hello@example.com

HTML

<address>
  Ana García<br>
  Calle Mayor 1, Cádiz<br>
  <a href="mailto:hello@example.com">hello@example.com</a>
</address>

Con estilos de elements/sections.css, sin clase.

`<article>`

MDN

Un contenido que seguiría teniendo sentido si se extrajera y publicara en otro lugar: una entrada de blog, una tarjeta de producto o un comentario.

Release notes

Version 3.1 styles the elements that had no look of their own.

HTML

<article>
  <h4>Release notes</h4>
  <p>Version 3.1 styles the elements that had no look of their own.</p>
</article>

LUZ no añade estilos: se mantiene el aspecto del navegador. Es una caja neutra. Añádele una clase como luz-card si quieres darle un fondo.

`<aside>`

MDN

Contenido junto al flujo principal que se puede omitir sin perder el hilo: una barra lateral, una cita destacada o enlaces relacionados. En el nivel superior de la página, es una región complementaria.

HTML

<aside aria-label="Related">
  <p>Related: <a href="#">Design tokens</a></p>
</aside>

LUZ no añade estilos: se mantiene el aspecto del navegador.

`<footer>`

MDN

Información de cierre de la página o del artículo o la sección más cercanos: autoría, copyright y enlaces relacionados.

HTML

<footer>
  <small>© 2026 LUZ Design System</small>
</footer>

LUZ no añade estilos: se mantiene el aspecto del navegador.

`<h1>`

MDN

El encabezado principal, que indica de qué trata la página. Usa uno por página. LUZ muestra todos los encabezados con la fuente serif de títulos, peso ligero y espaciado entre letras reducido.

HTML

<h1>Heading level 1</h1>

Con estilos de elements/sections.css, sin clase. Aquí está oculto a las tecnologías de asistencia para que esta página conserve un único h1 y una jerarquía correcta. Copia el marcado de abajo.

`<h2>`

MDN

El encabezado de una sección principal de la página. Baja un nivel cada vez, sin saltarte ninguno. LUZ lo muestra con la fuente serif de títulos, peso ligero y espaciado entre letras reducido.

HTML

<h2>Heading level 2</h2>

Con estilos de elements/sections.css, sin clase. Aquí está oculto a las tecnologías de asistencia para que esta página conserve un único h1 y una jerarquía correcta. Copia el marcado de abajo.

`<h3>`

MDN

El encabezado de una parte dentro de una sección h2. LUZ lo muestra con la fuente serif de títulos, peso ligero y espaciado entre letras reducido.

HTML

<h3>Heading level 3</h3>

Con estilos de elements/sections.css, sin clase. Aquí está oculto a las tecnologías de asistencia para que esta página conserve un único h1 y una jerarquía correcta. Copia el marcado de abajo.

`<h4>`

MDN

El encabezado de una parte dentro de una sección h3. LUZ lo muestra con la fuente serif de títulos, peso ligero y espaciado entre letras reducido.

HTML

<h4>Heading level 4</h4>

Con estilos de elements/sections.css, sin clase. Aquí está oculto a las tecnologías de asistencia para que esta página conserve un único h1 y una jerarquía correcta. Copia el marcado de abajo.

`<h5>`

MDN

El encabezado de una parte dentro de una sección h4. LUZ lo muestra con la fuente serif de títulos, peso ligero y espaciado entre letras reducido.

HTML

<h5>Heading level 5</h5>

Con estilos de elements/sections.css, sin clase. Aquí está oculto a las tecnologías de asistencia para que esta página conserve un único h1 y una jerarquía correcta. Copia el marcado de abajo.

`<h6>`

MDN

El encabezado de menor nivel, para una parte dentro de una sección h5. Si lo necesitas a menudo, quizá la página tenga demasiados niveles. LUZ lo muestra con la fuente serif de títulos, peso ligero y espaciado entre letras reducido.

HTML

<h6>Heading level 6</h6>

Con estilos de elements/sections.css, sin clase. Aquí está oculto a las tecnologías de asistencia para que esta página conserve un único h1 y una jerarquía correcta. Copia el marcado de abajo.

`<header>`

MDN

La apertura de la página o del artículo o sección más cercanos: un título, un logotipo, un campo de búsqueda o la navegación principal.

Getting started

Three layers, adopted in order.

HTML

<header>
  <h4>Getting started</h4>
  <p>Three layers, adopted in order.</p>
</header>

LUZ no añade estilos: se mantiene el aspecto del navegador.

`<hgroup>`

MDN

Agrupa un encabezado con su subtítulo o lema para que la línea adicional no se interprete como otro encabezado.

Tokens

Variables for every design decision.

HTML

<hgroup>
  <h4>Tokens</h4>
  <p>Variables for every design decision.</p>
</hgroup>

LUZ no añade estilos: es estructura. El encabezado y el párrafo que contiene conservan su propio estilo.

`<main>`

MDN

Envuelve el contenido propio de esta página, sin el encabezado, la navegación ni el pie que se repiten en todas. Solo puede haber un main visible, así que esta tarjeta muestra solo el marcado: la página que estás leyendo ya está dentro de uno.

Solo marcado: este elemento no se representa.

HTML

<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
  …
</main>

LUZ no añade estilos: se mantiene el aspecto del navegador. tabindex="-1" permite que el enlace para saltar al contenido mueva el foco hasta aquí.

`<nav>`

MDN

Envuelve los enlaces que sirven para moverse por el sitio o la página. Si hay más de uno, ponle un nombre a cada uno para que las personas que usan lectores de pantalla los distingan.

HTML

<nav aria-label="Example navigation">
  <a href="#">Home</a> ·
  <a href="#">Docs</a> ·
  <a href="#">Site</a>
</nav>

LUZ no añade estilos: es un punto de referencia, no una caja visual. Un nav con una lista es una lista normal; para una fila de enlaces usa .o-row, y para las migas de pan y la barra lateral, LUZ tiene componentes con sus propias clases.

`<search>`

MDN

Envuelve un formulario de búsqueda o filtro; así, los lectores de pantalla lo anuncian como una región de búsqueda. No necesita el atributo role.

HTML

<search>
  <form action="#">
    <label for="d-search">Search the docs</label>
    <input class="luz-input" id="d-search" type="search" name="q">
    <button class="luz-btn luz-btn--primary" type="submit">Search</button>
  </form>
</search>

LUZ no añade estilos: es una región, no una caja visual. El formulario que contiene define su aspecto.

Conviene usarlo

Úsalo alrededor del formulario y los controles de una búsqueda o filtro para que los lectores de pantalla lo anuncien como una región de búsqueda sin atributo role. No es para los resultados: estos van en el contenido principal. Las sugerencias de búsqueda rápida que formen parte de la búsqueda sí van dentro. Disponible de forma general desde octubre de 2023.

Varias búsquedas: El ejemplo de MDN distingue dos búsquedas de una misma página mediante title. Pon un nombre distinto a cada una.

Fuente: MDN, consultada el 11 de octubre de 2026.

`<section>`

MDN

Agrupa contenido bajo un encabezado cuando no haya un elemento más específico adecuado. Solo se convierte en una región cuando le das un nombre accesible.

Installation

Add the tokens first, then the core.

HTML

<section>
  <h4>Installation</h4>
  <p>Add the tokens first, then the core.</p>
</section>

LUZ no añade estilos: se mantiene el aspecto del navegador.