Markdown Unordered Lists to HTML ul/li Tags

Unordered Lists in Markdown

Markdown supports three characters for unordered list markers: asterisks (*), hyphens (-), and plus signs (+). All three produce the same HTML output.

Basic Unordered List

- Item one
- Item two
- Item three

Converts to:

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

You can also use * or + as markers — the HTML output is identical.

List Items with Multiple Paragraphs

Indent continuation paragraphs with four spaces or one tab:

- First item

  This is a continuation paragraph for the first item.

- Second item

Converts to:

<ul>
  <li>
    <p>First item</p>
    <p>This is a continuation paragraph for the first item.</p>
  </li>
  <li>
    <p>Second item</p>
  </li>
</ul>

Notice that when any list item contains a blank line, the parser wraps all items in <p> tags. This is called a loose list, as opposed to a tight list where items are rendered without paragraph wrappers.

Mixed Content in Lists

List items can contain other block elements such as code blocks, blockquotes, and even other lists. Proper indentation is key:

- Item with code:

      console.log("Hello");

- Item with a blockquote:

  > A quoted remark

Consistency Tips

Pick one marker style and stick with it throughout your document. Most style guides recommend - for unordered lists because it is visually distinct from emphasis markers (*).