---
title: "Agentic Semantic Web"
description: "A CSS framework for the agentic era. Agents write markdown. Packs handle the rest. The output is agent-readable too."
---

<header data-hero>
  <p data-text="eyebrow">CSS framework for the agentic era</p>
  <h1>Agentic Semantic Web</h1>
  <p>Agents write markdown. Packs handle the rest.<br>The output is semantic, readable, and cheap to parse.</p>
  <p data-role="command-box"><code>&lt;link rel="stylesheet" href="asw.css"&gt;</code></p>
  <nav>
    <a href="/docs/getting-started/introduction/">Get started</a>
    <a href="/docs/">Documentation</a>
    <a href="https://git.trentuna.com/trentuna/asw">Source</a>
  </nav>
</header>

## Write HTML. Get this.

No classes. No build step. The framework reads intent from structure and data-attributes.

<section data-layout="grid-2">

<div data-demo>

```html
<article>
  <header><h3>Session 2847</h3></header>

  <div data-callout="tip">
    <span data-callout-title>Insight</span>
    <p>Semantic HTML is what agents
    naturally produce.</p>
  </div>

  <ul>
    <li data-task="done">Token layer</li>
    <li data-task="done">Docs taxonomy</li>
    <li data-task="wip">Hero page</li>
    <li data-task="todo">Vocabulary</li>
  </ul>
</article>
```

</div>

<div data-demo>

<article>
<header><h3>Session 2847</h3></header>

<div data-callout="tip">
<span data-callout-title>Insight</span>
<p>Semantic HTML is what agents naturally produce.</p>
</div>

<ul>
<li data-task="done">Token layer</li>
<li data-task="done">Docs taxonomy</li>
<li data-task="wip">Hero page</li>
<li data-task="todo">Vocabulary</li>
</ul>
</article>

</div>

</section>

## Three layers

<section data-layout="grid-3">

<article data-role="card">
<header><h3>Agent as author</h3></header>
<p>Write markdown and frontmatter. A pack — Hugo, Flask, Pandoc, nginx — turns it into ASW-styled HTML. The agent never touches CSS.</p>
</article>

<article data-role="card">
<header><h3>Agent as builder</h3></header>
<p>The semantic HTML contract. <code>&lt;nav&gt;</code>, <code>&lt;article&gt;</code>, <code>data-layout</code>, <code>data-task</code> — a vocabulary for templates that ASW styles automatically.</p>
</article>

<article data-role="card">
<header><h3>Agent as reader</h3></header>
<p>ASW output is cheap to parse. Semantic HTML carries meaning in structure, not class strings. A downstream agent consumes fewer tokens and understands more.</p>
</article>

</section>

## The vocabulary

Concepts agents have but HTML doesn't. Named with `data-*` attributes, not invented classes.

<section data-layout="grid-2">

<div>

### Vault extensions

- `data-task` — states: done, wip, blocked, todo
- `data-callout` — notes: tip, warning, error, info
- `data-wikilink` — knowledge graph links
- `data-status` — operational indicators
- `data-redacted` — renders as ████████

[Explore vault docs](/docs/vault/tasks/)

</div>

<div>

### AI disclosure

Every ASW page can declare its provenance:

```html
<meta name="ai-disclosure"
      content="ai-generated">
<meta name="ai-model"
      content="claude-sonnet-4-6">
```

EU AI Act Article 50 compliant. Built into the framework's meta partials.

</div>

</section>

## Packs

Drop ASW into any stack. Each pack ships integration files and a SKILLS.md for agents.

<section data-layout="grid-3">

<article data-role="card">
<header><h3>Hugo</h3></header>
<p>Layouts, partials, shortcodes. The ASW site itself runs on this pack.</p>
</article>

<article data-role="card">
<header><h3>nginx</h3></header>
<p>Styled error pages, autoindex with ASW. Drop-in conf snippets.</p>
</article>

<article data-role="card">
<header><h3>Pandoc</h3></header>
<p>HTML5 template and Lua filter. Convert any markdown to ASW output.</p>
</article>

</section>

<p><a href="/docs/packs/overview/">All packs</a> — Apache, Caddy, Flask, Python also available.</p>

## Explore

<section data-layout="grid-3">

<article data-role="card">
<header><h3><a href="/docs/">Documentation</a></h3></header>
<p>Feature reference with live inline demos. Typography, components, vault extensions, layouts, theming.</p>
</article>

<article data-role="card">
<header><h3><a href="/layouts/">Layouts</a></h3></header>
<p>Gallery of available page layouts. Docs, essay, console, grid, prose, report.</p>
</article>

<article data-role="card">
<header><h3><a href="/lab/">Lab</a></h3></header>
<p>Experiments, kitchen sinks, font specimens. Where features are tested before they ship.</p>
</article>

</section>