Encabezados

Los encabezados reciben automáticamente ID de ancla para poder enlazarlos.

ID generados automáticamente

<h2>My Heading</h2>

## My Heading

Se renderiza como <h2 id="my-heading">My Heading</h2>. Cada <h2> a <h6> sin id recibe uno a partir de su texto: en minúsculas, con cada secuencia de otros caracteres convertida en un guion. Un slug que ya está ocupado en la página recibe un número, my-heading-2.

ID de encabezado personalizados

Dale al encabezado su propio id y htmlpress lo conserva:

<h2 id="custom-id">My Heading</h2>

## My Heading {#custom-id}

Enlázalo con #custom-id. Los id escritos en la página se reservan primero, así que un slug generado nunca ocupa uno al que apunta un enlace desde otro sitio. Dale un id a un encabezado solo cuando un enlace necesite que sea fijo. Este mismo encabezado usa id="custom-ids".

Niveles de encabezado

Usa de <h2> a <h4> para estructurar el contenido. El <h1> está reservado para el título de la página.

De <h2> a <h4> aparecen en la tabla de contenidos; <h5> y <h6> tienen estilo y se pueden enlazar, pero no se listan.

Control de la tabla de contenidos

La tabla de contenidos lista los <h2>, <h3> y <h4> de la página y resalta el que está a la vista. Los encabezados dentro de un componente de aviso, tarjeta, pasos o pestañas quedan fuera, así que los encabezados propios de un componente nunca saturan el esquema de la página.

data-toc="false" deja un encabezado fuera de la tabla de contenidos mientras sigue en la página; data-toc="only" lista un encabezado allí sin mostrarlo, como punto de referencia para un tramo de la página que no tiene título visible. Cualquier otro valor hace fallar la compilación.

<h2 data-toc="false">Shown, not listed</h2>
<h2 data-toc="only">Listed, not shown</h2>

## Shown, not listed [!toc]

## Listed, not shown [toc]

Enlaces de ancla al pasar el ratón

Cada <h2> a <h6> con id muestra al pasar el ratón un enlace # a sí mismo, para copiar la URL del ancla y compartirla.

Tabla de contenidos en línea

Un <htmlpress-toc> escrito en la página se rellena con la tabla de contenidos de la página, enmarcada como una tarjeta: hasta sus <h4> por defecto, solo los <h2> con max-level="2", y hasta los <h3> con max-level="3". Una página sin encabezados no recibe ninguna.

<htmlpress-toc max-level="2"></htmlpress-toc>

::toc{maxLevel="2"}