HTML List Generator
Convert plain text into clean, ready-to-paste HTML list code. This free HTML list generator turns your lines into a bulleted <ul>, a numbered <ol>, or a definition list <dl> — with a nested HTML list generator, custom bullets, numbering styles, start and reversed attributes, an item editor with drag-free reordering, live preview, and one-click copy or download. Everything runs 100% in your browser; no sign-up, no server.
1. Your items — paste text or use the editor
2. List options
term: definition (split on the first colon).Styling (adds a <style> block to the code)
3. Live preview & code
How to use this HTML list generator
- Paste your items into the text box — one per line — or type directly into the item editor.
- Choose <ul> for bullets, <ol> for numbers, or <dl> for term/definition pairs.
- For a nested list, indent lines (2 spaces or a tab per level) or set each item's level in the editor.
- Pick a bullet or numbering style, set
start/reversedfor ordered lists, and add classes or styling if you want. - Check the live preview, then copy the HTML or download a standalone
.htmlfile.
ul vs ol vs dl — which list type do you need?
| Tag | List type | Use when… | Items |
|---|---|---|---|
<ul> | Unordered (bulleted) | Order doesn't matter: features, ingredients, links | <li> |
<ol> | Ordered (numbered) | Sequence matters: steps, rankings, instructions | <li> |
<dl> | Description / definition | Name–value pairs: glossaries, FAQs, metadata | <dt> + <dd> |
Related tools
- HTML Entity Encoder — encode &, <, > and other special characters by hand.
- HTML Minifier — compress any HTML markup into a single line.
- List to JSON Converter — turn the same plain-text lists into JSON arrays.
- Markdown Formatter — format Markdown that also supports lists and code.
Frequently asked questions
What is an HTML list generator?
An HTML list generator is a tool that converts plain text into HTML list markup. Paste your items (one per line), choose <ul> for a bulleted list, <ol> for a numbered list, or <dl> for a definition list, then copy the generated <li>/<dt>/<dd> code and paste it into your page. This generator also supports nested lists, custom bullet and numbering styles, the start and reversed attributes, and one-click copy or download — all in your browser.
What is the difference between ul, ol and dl in HTML?
Use <ul> (unordered list) when item order does not matter — items render with bullets. Use <ol> (ordered list) when sequence matters — items render numbered, lettered, or in roman numerals, and you can control the starting number with the start attribute or count backwards with reversed. Use <dl> (description list) for name/value pairs: write each line as "term: definition" and the tool splits it into <dt> and <dd> elements, ideal for glossaries, FAQs, and metadata.
How do I create a nested HTML list with this tool?
Two ways. In the text box, indent a line with two spaces or one tab per level before clicking "Apply text" — indented lines become sub-items. Or use the item editor: select the level (0–4) for any item and use the up/down buttons to reorder. Nested <ul> or <ol> elements are placed inside their parent <li> automatically, which is the semantically correct structure, and a live preview shows the hierarchy as you type.
How do I change the bullet or numbering style of my HTML list?
Pick a list-style-type from the style dropdown. For <ul>: disc, circle, square, or none. For <ol>: decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i, ii, iii), upper-roman (I, II, III), or none. The style is applied as inline CSS on the list element, so it works in any page or CMS without extra stylesheets. You can also set marker color, item spacing, font size, and indentation in the styling options.
What do the start and reversed attributes do on an ordered list?
The start attribute sets the number the ordered list begins at — for example, start="5" renders 5, 6, 7 instead of 1, 2, 3, which is useful when a list continues across sections. The reversed attribute makes the list count backwards (10, 9, 8) and is valid HTML5. Enable either option in the "Ordered list" section; they only appear in the code for <ol> lists.
Will special characters like & and < be escaped in the generated code?
Yes, by default. Every & becomes &, < becomes <, and > becomes >, so text copied from logs, spreadsheets, or other pages displays exactly as typed instead of breaking your markup. If you intentionally want raw HTML inside items — for example, your own <a> links or <strong> tags — turn off the "Escape HTML" checkbox and the content is inserted verbatim.
Can I add my own CSS classes to the generated HTML list?
Yes. The "List class" field adds a class attribute to the <ul>/<ol>/<dl> wrapper, and the "Item class" field adds a class to every <li> (or <dt>/<dd>). This lets you hook the generated markup straight into your site stylesheet or a framework such as Tailwind or Bootstrap. There is also an option to wrap each item in an <a> link with a URL you provide.
Is my text sent to a server when I use this HTML list generator?
No. This tool is 100% client-side JavaScript — everything (parsing, nesting, escaping, preview, copy, and download) runs in your browser. Your text never leaves your device, there is no account, and it works offline once the page is loaded.
Free tool by NRTechStudio