# HTML Input and Output

Wasot supports bidirectional conversion with HTML, allowing you to import HTML documents into the wasot format and export wasot documents to HTML.

## Quick Start

```bash
# Convert wasot to HTML
wasot document.wasot -t html

# Convert HTML to wasot
wasot page.html -t wasot

# Piping works too
cat document.wasot | wasot -t html
cat page.html | wasot -t wasot

# Output to file
wasot document.wasot -t html -o output.html
wasot page.html -t wasot -o output.wasot
```

## Wasot to HTML

When converting wasot to HTML, block types are mapped to semantic HTML elements.

### Markdown-Style Headings

Headings use markdown-style `#` syntax:

| Wasot Block | HTML Element |
|-------------|--------------|
| `.#` | `<h1>` |
| `.##` | `<h2>` |
| `.###` | `<h3>` |
| `.####` | `<h4>` |
| `.#####` | `<h5>` |
| `.######` | `<h6>` |

### Element Mapping

| Wasot Block | HTML Element | Notes |
|-------------|--------------|-------|
| `.p`, `.paragraph` | `<p>` | Paragraph |
| `.ul`, `.unordered-list` | `<ul>` | Unordered list |
| `.ol`, `.ordered-list` | `<ol>` | Ordered list |
| `.li`, `.list-item` | `<li>` | List item |
| `.blockquote`, `.quote` | `<blockquote>` | Block quote |
| `.code`, `.pre` | `<pre><code>` | Code block |
| `.table` | `<table>` | Table |
| `.tr`, `.row` | `<tr>` | Table row |
| `.td`, `.cell` | `<td>` | Table cell |
| `.th`, `.header-cell` | `<th>` | Table header cell |
| `.a`, `.link` | `<a>` | Anchor/link |
| `.img`, `.image` | `<img>` | Image (void element) |
| `.strong`, `.bold`, `.b` | `<strong>` | Bold text |
| `.em`, `.emphasis`, `.i` | `<em>` | Italic text |
| `.section` | `<section>` | Section |
| `.article` | `<article>` | Article |
| `.header` | `<header>` | Header |
| `.footer` | `<footer>` | Footer |
| `.nav` | `<nav>` | Navigation |
| `.main` | `<main>` | Main content |
| `.aside` | `<aside>` | Sidebar |
| `.div` | `<div>` | Generic container |
| `.span` | `<span>` | Inline container |
| Other types | `<div x-type="...">` | Custom type via x-type attribute |

### Example

```wasot
.article
.# Introduction:
.p
This is a paragraph with some text.

.blockquote
A famous quote goes here.

.ul
..li First item
..li Second item
..li Third item
./
```

Converts to:

```html
<article>
  <h1>Introduction</h1>
  <p>
    This is a paragraph with some text.
  </p>
  <blockquote>
    A famous quote goes here.
  </blockquote>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
</article>
```

### Custom Types

Block types that don't have a direct HTML equivalent are output as `<div>` elements with an `x-type` attribute:

```wasot
.custom-widget :my-widget
Widget content here
```

Converts to:

```html
<div x-type="custom-widget" id="my-widget">
  Widget content here
</div>
```

### Void Elements

Wasot void elements (marked with trailing colon) map to HTML void elements:

```wasot
.p
Text before the break.
.br:
Text after the break.

.hr:

.img: alt text here .. src="photo.jpg"
```

Converts to:

```html
<p>
  Text before the break.
  <br>
  Text after the break.
</p>
<hr>
<img src="photo.jpg" alt="alt text here">
```

### ID Preservation

Block IDs are converted to HTML `id` attributes:

```wasot
.section :intro
Introduction section content.
```

Converts to:

```html
<section id="intro">
  Introduction section content.
</section>
```

## HTML to Wasot

When importing HTML, the converter parses the document structure and generates wasot blocks.

### Content Extraction

By default, the converter extracts content intelligently:

- Scripts and styles are stripped
- Navigation, header, and footer elements can be optionally stripped
- Main content is preserved with proper nesting

### Example

```html
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
  <article>
    <h1>Welcome</h1>
    <p>This is <strong>important</strong> text.</p>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
    </ul>
  </article>
</body>
</html>
```

Converts to:

```wasot
.html
..head
...title
My Page

..body
...article
....# Welcome:
....p
This is
.....strong
important
 text.

....ul
.....li
Item one

.....li
Item two
```

### Custom Types from x-type

HTML elements with `x-type` attributes are converted back to their original wasot type:

```html
<div x-type="custom-widget" id="my-widget">
  Widget content
</div>
```

Converts to:

```wasot
.custom-widget :my-widget
Widget content
```

### Void Element Handling

HTML void elements are automatically detected and converted with wasot void syntax:

```html
<p>Line one<br>Line two</p>
<hr>
<img src="photo.jpg" alt="A photo">
```

Converts to:

```wasot
.p
Line one
..br:
Line two

.hr:
.img: A photo .. src="photo.jpg"
```

## Format Detection

The CLI automatically detects HTML format from:

1. **File extension**: `.html` or `.htm`
2. **Content**: Documents starting with `<!DOCTYPE html>` or `<html>`

```bash
# Extension-based detection
wasot page.html -t wasot

# Content-based detection (stdin)
echo "<html><body><p>Hello</p></body></html>" | wasot -t wasot
```

You can also explicitly specify the format:

```bash
wasot -f html -t wasot page.txt
```

## Chaining Conversions

Convert HTML through other formats:

```bash
# HTML to XML
wasot page.html -t xml

# HTML to JSONL (event stream)
wasot page.html -t jsonl

# Full roundtrip
wasot document.wasot -t html | wasot -t wasot
```

## CLI Options

| Option | Description |
|--------|-------------|
| `-f html`, `--from html` | Explicitly specify HTML input format |
| `-t html`, `--to html` | Output as HTML |
| `-o FILE`, `--output FILE` | Write output to file |
| `-s SELECTOR`, `--select SELECTOR` | Filter wasot blocks before HTML conversion |

### Using Selectors

Convert only specific parts of a wasot document to HTML:

```bash
# Only paragraphs
wasot document.wasot -s "paragraph" -t html

# Only content inside sections
wasot document.wasot -s "section > *" -t html
```

## Related Documentation

- [Void Elements](./void_elements.md) - Self-closing element syntax
- [Wasot and XML](./wasot_and_xml.md) - XML format conversion
- [CLI Design](./cli_design.md) - Command-line interface overview
- [Architecture](./architecture.md) - Event-driven processing model
