Boneyard Tools

Text to HTML List Converter

Paste one item per line and get a tidy HTML list built as you type. Every line becomes an escaped li, blank lines are dropped, and a line indented with a tab or two spaces nests one level under the item above it. The output is indented two spaces per level so you can paste it straight into a template.

How to convert text to an HTML list

  1. Type or paste your lines into the 'Your lines' box, one list item per line.
  2. Indent a line with a tab (or two spaces) to nest it under the line above.
  3. Tick 'Ordered list (ol)' for a numbered list, or leave it off for bullets.
  4. Adjust 'Skip blank lines' and 'Trim lines' if you need blank items kept or exact spacing preserved.
  5. Type a value in the 'Class' box to add a class attribute to the outer list.
  6. Read the generated markup in the HTML box and press Copy.

Examples

Nested list from a tab-indented outline

Apples
Oranges
	Navel
	Blood
Pears
<ul>
  <li>Apples</li>
  <li>Oranges
    <ul>
      <li>Navel</li>
      <li>Blood</li>
    </ul>
  </li>
  <li>Pears</li>
</ul>

Special characters escaped safely

a < b
AT&T
<ul>
  <li>a &lt; b</li>
  <li>AT&amp;T</li>
</ul>

Ordered (numbered) list

First
Second
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Frequently asked questions

How do I make a numbered list instead of bullets?

Tick 'Ordered list (ol)'. The output switches from a ul element to an ol, and the browser numbers each li automatically, so you do not type the digits yourself.

Are special characters escaped?

Yes, always. The five HTML-sensitive characters ampersand, less-than, greater-than, double quote and single quote are converted to entities (&amp;, &lt;, &gt;, &quot; and &#39;). That keeps a line like a < b from breaking your markup or injecting a tag.

How do I create a nested sub-list?

Indent the child lines with a single tab, or with two leading spaces, and they nest one level under the previous top-level item. The tool wraps the children in their own ul or ol inside that parent li.

How deep can the nesting go?

One level only. Indentation depth is capped at one, so even a doubly indented line becomes a first-level child rather than a grandchild. For deeper trees you would need to nest lists by hand after copying the output.

What happens to blank lines?

By default 'Skip blank lines' is on, so empty lines are ignored and never become empty li items. Untick it if you deliberately want blank lines preserved as list entries.

What does the 'Trim lines' option do?

With trim on, each line is stripped of leading and trailing whitespace before it becomes an li. With trim off, only the leading indentation used for nesting is removed and any trailing spaces are kept, which is useful when spacing inside an item matters.

Can I add a class to the list?

Yes. Type into the 'Class' field and the value is added as a class attribute on the outer ul or ol, for example <ul class="menu">. The class text is HTML-escaped too, so quotes in it cannot break the tag.

Which line endings are supported?

Windows CRLF, classic Mac CR and Unix LF are all recognized as line breaks, so a list pasted from any operating system splits into items correctly.

Is my text uploaded anywhere?

No. The markup is generated entirely in your browser, so the lines you paste never leave your device. A JSON API exists for programmatic use but only runs when you call it yourself.

Learn more

Related tools