# HTML

> Pull parts out of a web page with CSS selectors, and build HTML such as a table for an email.

Built-in step · 3 steps. Web page: https://docs.lodol.com/docs/integrations/built-in/html

## Steps

### Extract from a web page

Pull parts out of a web page with CSS selectors: a headline, a price, every link, or a list of products with a name and price each. Give it the page's address, or the HTML an earlier step fetched.

**Inputs**

- Web page (`page`, text, required): The page to read: its address, such as https://example.com/pricing, or what an earlier step fetched, such as @response from an HTTP step (links then come back in full) or an email's HTML body.
- Parts to pull out (`parts`, list, required): What to pull out of the page, each with a name and a CSS selector, as a browser's developer tools show it: h1, .price, #summary, a.next, table tr.
- List of (`each`, text): To read a list of things, a CSS selector for each of them, such as .product, article or table tr. The parts are then read inside each one, and the result is a list of records, one per match.

**Outputs**: What was pulled out. Each part is in 'parts' under its name (parts.price). With a List of, 'items' has one record per thing found, each with the parts under their names: loop over items, or read parts for the first one.

- `count` (number): How many items were found. 1 without a List of.
- `items` (list): With a List of, one record per thing found, each with the parts under their names, in page order. Otherwise a one-item list holding parts.
- `parts` (object): Each part under its name: its text (or HTML, or the attribute asked for), a list of them when the part takes every match, or blank (null) when nothing matched. With a List of, the first item's parts.
- `title` (text): The page's title, or empty.
- `url` (text): The page's address, when it was fetched or came with one. Otherwise empty.

**Example output**

```json
{
  "count": 1,
  "items": [
    {
      "features": [
        "Unlimited workflows",
        "Priority support",
        "Audit log"
      ],
      "name": "Pro plan",
      "price": "$49/month"
    }
  ],
  "parts": {
    "features": [
      "Unlimited workflows",
      "Priority support",
      "Audit log"
    ],
    "name": "Pro plan",
    "price": "$49/month"
  },
  "title": "Pricing \u2013 Acme",
  "url": "https://acme.test/pricing"
}
```

### Make an HTML table

Turn rows into an HTML table that looks right in an email: the rows of a sheet, or any records an earlier step returned, with a column per field.

**Inputs**

- Rows (`rows`, list, required): The rows, such as the rows a sheet or an earlier step returned. Each row's fields become the columns, named after them.
- Columns (`columns`, list): The columns to show, in order, by field name, such as Name and Email. Leave empty for every field, in the order they first appear.
- Title (`title`, text): A title shown above the table, such as This week's signups. Leave empty for none.
- Style (`style`, text): Styled for an email, with the styles written into the HTML so every email app shows them, or plain, with no styles, for a web page or a template that has its own. One of: `styled` (Styled for an email), `plain`. Default: `styled`.

**Outputs**: The table as HTML, in 'html': put it in an email's body, on its own or inside other HTML.

- `columns` (list): The columns shown, in order.
- `count` (number): How many rows the table has.
- `html` (text): The table's HTML: a header row, then a row per record.

**Example output**

```json
{
  "columns": [
    "Company",
    "Seats",
    "Plan"
  ],
  "count": 2,
  "html": "<table style=\"border-collapse: collapse; width: 100%;\">\n<thead><tr><th>Company</th><th>Seats</th><th>Plan</th></tr></thead>\n<tbody><tr><td>Acme</td><td>12</td><td>Pro</td></tr>\n<tr><td>Northwind</td><td>3</td><td>Free</td></tr></tbody></table>"
}
```

### Turn text into HTML

Turn Markdown or plain text into HTML for an email or a web page: headings, bold, lists, links and tables, with styles that email apps show. What an AI step writes in Markdown reads as it should.

**Inputs**

- Text (`text`, text, required): What to turn into HTML, written in Markdown (# Heading, **bold**, - list items, [links](https://…), | tables) or as plain text, where each line break is kept. HTML passes through as it is.
- Style (`style`, text): Styled for an email, with the styles written into the HTML so every email app shows them, or plain, with no styles, for a web page or a template that has its own. One of: `styled` (Styled for an email), `plain`. Default: `styled`.

**Outputs**: The HTML, in 'html', ready for an email's body, and the same words as plain text in 'text'.

- `html` (text): The text as HTML.
- `text` (text): The same words as plain text, for an email's text-only version or a preview.

**Example output**

```json
{
  "html": "<div style=\"font-family: -apple-system, sans-serif; font-size: 15px;\">\n<h2>Weekly summary</h2>\n<p>Three new customers signed up, and <strong>Acme</strong> upgraded to Pro.</p>\n</div>",
  "text": "Weekly summary\n\nThree new customers signed up, and Acme upgraded to Pro."
}
```