Writing clean, semantic HTML lists from plain text
When to reach for ul versus ol, why escaping list text matters, and how nesting and indentation translate a plain outline into valid markup.
Choose ul or ol by meaning, not looks
An unordered list (ul) is for items whose order carries no meaning, like a set of features or ingredients. An ordered list (ol) is for sequences where position matters, such as steps in a recipe or ranked results. Screen readers announce the type and, for ordered lists, the item number, so the choice is about meaning rather than the bullet or digit you happen to see. Pick the tag that matches the content and let styling handle the visual marker separately.
Why escaping list text is not optional
The moment your list items contain characters like less-than, greater-than or an ampersand, raw text becomes a hazard. An unescaped < can start a tag the browser tries to parse, and stray markup from pasted content can silently rearrange or break the page. This converter escapes those characters into entities on every item, so a value such as a < b renders as the literal text a < b instead of an unterminated element. That single habit prevents both broken layouts and a class of injection bugs.
From indentation to nested lists
A plain outline expresses hierarchy with indentation, and valid HTML expresses it by placing a child list inside a parent li. This tool bridges the two: a line indented with a tab or two spaces is gathered as a child of the top-level item directly above it, and its siblings are wrapped in a fresh ul or ol nested within that li. The result is well-formed markup where the sub-list closes before its parent item does, which is exactly what browsers and validators expect. Because nesting is capped at one level, the output stays predictable rather than guessing at deep structures.
Readable output you can drop into a template
Generated markup is only useful if you can read and maintain it, so each level is indented two spaces and every tag sits on its own line. That formatting makes a nested list easy to scan in a code review and simple to reindent inside a larger document. If you would rather ship compact markup, you can minify the copied result later, but starting from a clean, human-readable block keeps mistakes visible. The two-space convention also matches common formatter defaults, so re-running a formatter rarely reshuffles it.