A flat-list HTML generator
This tool emits a single HTML list element containing one child per non-blank input line. You pick the wrapper: `<ul>` for an unordered list (default), `<ol>` for a numbered list, or `<dl>` for a definition list where each line is split on the first `:` into a `<dt>` term and `<dd>` definition. The children are indented with two spaces for readability.
Escape HTML is on by default. When on, every `&` in your content becomes `&`, every `<` becomes `<`, every `>` becomes `>` - safe for user-supplied strings, safe for pasting anything you grabbed from logs or another page. Turn it off only if you deliberately want raw HTML inside your list items (for example, linking text with `<a>`). Quote characters (`"` and `'`) are not escaped in either mode since they are legal in element content.
An optional class attribute is added to the wrapper element when you fill in the Class attribute field. The text is inserted verbatim - type something like `prose-list` or `product-features`, no leading dot. Keep it to valid CSS class characters; the tool does not validate or escape attribute content.
How to use convert a list to html
- 1Paste your list into the input panel, one item per line
- 2Pick the List type - <ul>, <ol>, or <dl>
- 3If you chose <dl>, format each line as `term: definition` (the first colon splits the two)
- 4Type a Class attribute if you want one added to the wrapper; leave blank to skip
- 5Leave Escape HTML on (default) unless you want raw markup inside items
- 6Copy or download the generated HTML from the output panel
Keyboard shortcuts
Drive ListShift without touching the mouse.
What this generator actually does
Fixed behaviors plus three options.
Three list wrappers: <ul>, <ol>, <dl>
`<ul>` wraps each line in `<li>` - the default. `<ol>` emits the same structure but as an ordered list. `<dl>` splits each input line on its first colon: text before the colon becomes a `<dt>` term, text after becomes a `<dd>` definition. Lines without a colon become terms with no definition.
Automatic HTML entity escaping
With Escape HTML on (default), the three characters that break HTML in element content - `&`, `<`, `>` - are converted to their named entities on every line. The tool never escapes quotes (`"`, `'`) because they are legal inside element content and do not need escaping there.
Opt out of escaping when you want raw HTML
Turn Escape HTML off if you are deliberately pasting HTML into items - say, `<a href="...">links</a>` or `<em>emphasis</em>`. The text goes through unchanged. Be careful when doing this with user-supplied content; the raw content will render as HTML rather than display as text.
Optional class attribute on the wrapper
Fill in Class attribute to get `<ul class="your-value">` on the wrapper. No leading dot, no quotes - just the class name. Multiple classes work too (`primary big`). The value is inserted verbatim, so avoid quotes and angle brackets in the class field.
Blank lines dropped; fixed two-space indent
Empty and whitespace-only lines in your input do not produce empty `<li></li>` elements - they are filtered out before emission. Children are always indented with two spaces for consistent output that diffs cleanly.
Worked example
With Escape HTML on (default), `&` and `<b>` are turned into entities.
Apples & pears <b>Oranges</b> Cherries
<ul> <li>Apples & pears</li> <li><b>Oranges</b></li> <li>Cherries</li> </ul>
Settings reference
How each option shapes the output using the sample above.
| Setting | What it does | Effect on the sample |
|---|---|---|
| List type: ul | Unordered list wrapper; each line becomes an <li> | Produces the 5-line block in the example |
| List type: ol | Ordered (numbered) list wrapper; same <li> children | <ul> becomes <ol>; browsers render numbers |
| List type: dl | Definition list; each line split on first `:` into <dt> and <dd> | Requires `term: definition` input format |
| Class attribute: my-list | Adds class="my-list" to the wrapper element | Opening tag becomes `<ul class="my-list">` |
| Escape HTML: on | Replaces &, <, > with their HTML entities | `<b>Oranges</b>` becomes `<b>Oranges</b>` |
| Escape HTML: off | Emits item text verbatim - raw markup renders as HTML | `<b>Oranges</b>` stays literal and would render bold in a browser |