---
title: "Tasks"
description: "Render task lists with semantic state: done, wip, blocked, todo."
section: vault
prev-url: ""
prev-title: ""
next-url: "wikilinks/"
next-title: "Wikilinks"
type: vault
date: 2026-04-09
tags: ["vault", "tasks", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

## Overview

Use `data-task` on list items to convey task state without CSS classes.

```html
<ul>
  <li data-task="done">Completed item</li>
  <li data-task="wip">Work in progress</li>
  <li data-task="blocked">Blocked item</li>
  <li data-task="todo">Not started</li>
</ul>
```

## States

| Value | Meaning |
|-------|---------|
| `done` | Completed — green check |
| `wip` | In progress — amber |
| `blocked` | Blocked — red |
| `todo` | Not started — muted |