# Páginas HTML

> Una página .html: un documento completo o un fragmento, su head como metadatos y cualquier elemento, estilo o script dentro del layout del sitio.

Cada archivo `.html` de un proyecto es una página, un documento completo o un fragmento; htmlpress lee ambos de la misma forma. Sus etiquetas `<title>` y `<meta name="…">` son sus metadatos, las claves que lista [Frontmatter](/es/authoring/frontmatter/), y el resto de su cuerpo es el contenido. Una [página Markdown](/es/authoring/markdown-pages/) es la misma página, escrita en Markdown.

Una página es HTML plano, y htmlpress no lo restringe: cualquier elemento, atributo, SVG en línea, `<canvas>`, `<iframe>`, elemento personalizado, estilo o script funciona tal como está escrito. No hay lenguaje de plantillas ni lista de permitidos. Htmlpress envuelve la página en el layout del sitio, así que obtiene la navegación, el tema y la búsqueda, y deja el resto al navegador.

Eso hace de una página algo más que un documento: un panel, un informe, una presentación o un explorador interactivo es un solo archivo `.html`. Consulta [Ejemplos](/es/examples/) para ver una docena, cada uno construido sobre datos públicos reales.

## Una página autocontenida

Los `<style>`, `<script>` y `<link>` propios de una página se conservan y se añaden al head del layout, después del tema. Los de un fragmento son los que van antes de su primer contenido; los de un documento completo, su `<head>`.

```html
<title>Contador</title>
<style>
  .counter button {
    border: 1px solid var(--htmlpress-border);
    background: var(--htmlpress-surface);
    color: var(--htmlpress-text);
  }
</style>
<script type="module">
  const button = document.querySelector(".counter button")
  let count = 0
  button.addEventListener("click", () => {
    button.textContent = `${++count} clics`
  })
</script>

<h1>Contador</h1>
<div class="counter">
  <button type="button">Haz clic</button>
</div>
```

## Encajar en el sitio

- **Limita los estilos a una clase.** El CSS de una página se aplica a todo el documento, layout incluido, así que antepón a cada regla una clase del elemento raíz de la página, como `.counter` arriba.
- **Usa los tokens del tema.** Los colores de los [tokens `--htmlpress-*`](/es/authoring/rich-elements/#tokens-del-tema) siguen el tema claro y oscuro y cualquier sobrescritura, sin media query propia.
- **Ejecuta los scripts como módulos.** `type="module"` se ejecuta cuando la página ya está analizada y mantiene sus nombres fuera del ámbito global.
- **Prefiere elementos semánticos.** El tema ya da estilo a encabezados, tablas, listas y formularios; una página solo necesita CSS propio para lo que HTML no tiene elemento.

## Lo que htmlpress cambia

El contenido entra en el layout tal como está escrito, salvo por estos pasos en tiempo de compilación:

- Los `<h2>` a `<h6>` sin `id` reciben uno, y los `<h2>` a `<h4>` llenan la tabla de contenidos; consulta [Encabezados](/es/authoring/headings/).
- Los enlaces al archivo de una página se convierten en su URL, y las URL relativas se resuelven desde el archivo fuente; consulta [Enlaces](/es/authoring/links/).
- `<pre><code class="language-*">` se resalta; consulta [Bloques de código](/es/authoring/code-blocks/).
- En la prosa, las URL sueltas se vuelven enlaces, los códigos `:emoji:` emoji y `$…$` fórmulas; consulta [Sintaxis avanzada](/es/authoring/advanced-syntax/). El código, los enlaces, los scripts, los estilos y cualquier elemento con `data-literal` quedan intactos.
- Las etiquetas `htmlpress-*` se convierten en componentes; consulta [Elementos enriquecidos](/es/authoring/rich-elements/).

Para una página que no quiere nada del marco del sitio, como una página de inicio, elige otro layout con `<meta name="layout">`; consulta [Frontmatter](/es/authoring/frontmatter/).