# Encabezados

> ID de encabezado generados, anclas personalizadas y la tabla de contenidos de la página.

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

## ID generados automáticamente

**HTML**

```html
<h2>My Heading</h2>
```

**Markdown**

```md
## 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:

**HTML**

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

**Markdown**

```md
## 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.

**HTML**

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

**Markdown**

```md
## 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.

**HTML**

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

**Markdown**

```md
::toc{maxLevel="2"}
```