List Tags Cheatsheet

"A quick reference for List tags you'll actually use"

Updated July 2026

Ordered, unordered, List Items, Description List, Description Term, Description Details

Ordered List

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

Unordered List

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

List Item

<ul>
  <li>Item Text Here</li>
</ul>

Description List

<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

Description Term

<dt>HTML</dt>

Description Details

<dd>HyperText Markup Language</dd>

HTML Lists Complete Core Snippet

<!-- 1. Unordered List -->
<ul>
  <li>Unordered List Item</li>
</ul>

<!-- 2. Ordered List -->
<ol>
  <li>Ordered List Item</li>
</ol>

<!-- 3. Description List with Term and Details -->
<dl>
  <dt>Description Term (HTML)</dt>
  <dd>Description Details (HyperText Markup Language)</dd>
</dl>
`

Beginner Tips

  1. Use semantic list tags (ul, ol, dl) instead of formatting plain text manually with breaks.
  2. Always nest your list items (li) directly inside a parent ul or ol container.
  3. Keep nested or multi-level sub-lists properly indented so the structural hierarchy stays clean and readable.
  4. Always configure a valid href destination and a clear semantic anchor text inside your links.
  5. Use the target="_blank" attribute safely alongside rel="noopener" when opening external links in a new tab.
  6. Ensure your description lists (dl) always maintain a correct sequence pairing of dt and dd elements.
Download HTML CheatSheet