How to Create Lists in HTML: A Beginner’s Guide to <ul>, <ol>, and <li>

You use lists for multiple reasons on a website. In this guide we'll cover how to create lists and common use cases on websites.

How to Create a List

A list in its most basic structure has two types of tags: a wrapper (the list itself) and the individual items (list items).

A list item looks like this

<li>This is a list item</li>

The wrapper can either be categorized as an unordered list or an ordered list. If the list items can be rearranged and the meaning and purpose still preserved than use an unordered list. Otherwise use an ordered list. For instance you can't be rearranging a step-by-step guide so you should use the ordered list tag.

<!--This is an unordered list-->
<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
<ul>

<!--This is an ordered list-->
<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
</ol>

What can a list be used for on a website

There are multiple reasons for using a list on a website. Let's explore different implementations so that you can feel more equipped when using these tags.

List Tags Are Used to Build Nav Menus

Nav menus are essential for organizing content logically for users, improve SEO with proper hierarchy, offers better UX, and increases accessibility for screen readers and keyboard navigation.

Since the order doesn't impact the meaning we can go ahead and us an unordered list

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

You'll notice a couple of new tags being used. For a nav menu you can use the <nav></nav> tags to add semantic meaning to your website. This lets search crawlers have a better idea of getting around your website.

Nav menus are essentially a list of links and so you'll need to use the <a></a> tags to make your list items clickable and take website visitors where they want to go. To link to a specific page be sure to use the href attribute as in the example.

List Tags Are Used to Create Feature/Service Lists

One of the quickest ways to convey the benefit of your product or service is with a feature or service list. You'll often seen these on the Home page or a Services page. Let's use my website as an example.

<section>
  <h2>What You'll Get Here</h2>
  <ul>
    <li>💻 Practical Coding Projects — Learn how to code and know how to apply it in everyday situations.</li>
    <li>💰 Monetization Strategies — Learn how to turn your code into income.</li>
    <li>🌍 Remote Work Tips — Learn how to work from anywhere.</li>
    <li>🎯 Clear Instructions — Guides that get straight to the point without any fluff.</li>
    <li>🧠 Travel Guidance — Be a pro traveling with useful tips from an experienced traveller</li>
  </ul>
</section>

I am using a new tags called the <section></section> tags again which add some semantic meaning indicating a group of related content and the <h2></h2> which is a second heading to indicate a title of lower significance than the first heading <h1></h1> which is typically reserved for the main title for the page.

List Tags Are Found in FAQs

Your customers/clients are bound to have questions which is a where a Frequently Asked Questions section can come in handy. FAQs will have a question answer format. You can use two lists to accomplish this format: an outer list for the question and an inner list for the answer.

<section>
  <h2>Frequently Asked Questions</h2>
  <ul>
    <li>
      <strong>What tools do I need to get started?</strong>
      <ul>
        <li>Visual Studio Code</li>
        <li>Node.js</li>
        <li>Git + GitHub account</li>
      </ul>
    </li>
    <li>
      <strong>How is this different from other tutorials?</strong>
      <ul>
        <li>No fluff - every project is practical and results-driven</li>
        <li>Focus on turning skills into income</li>
        <li>Clear and simple coding without the extra bloat to cause confusion</li>
      </ul>
    </li>
  </ul>
</section>

In addition to the nested lists for clear structure, you'll also notice the <section></section> tags again which add some semantic meaning indicating a group of related content. You'll also see I have used the <strong></strong> to convey extra importance to the question in my FAQ section. If I just used the <b></b> for bold it would add any additional semantic meaning besides darkening the text.

List Tags Are Found in Instructional Content

Whenever you are providing step-by-step instructions such as a recipe, tutorial, etc. you'll want to use the list tags.

<section>
  <h2>How to Push Changes to GitHub</h2>
  <ol>
    <li>Open the terminal window within Visual Studio Code</li>
    <li><code>git add *</code></li>
    <li><code>git commit -m "new updates"</code></li>
    <li><code>git push origin main</code></li>
  </ol>
</section>

Here I am using a new tag pair the <code></code> tags to wrap around text that is intended to be code. Ordered lists are perfect for step-by-step instructions. We know an ordered list is ideal because if we rearranged the list items, the task of push changing to GitHub would not be successful therefore the meaning would change.

List Tags Are Used in Forms

When you are looking group form fields such as a checklist look to use the list tags for greater clarity.

<form>
  <fieldset>
    <legend>Select Your Favorite Programming Languages:</legend>
    <ul>
      <li><label><input type="checkbox" name="languages" value="javascript"> JavaScript</label></li>
      <li><label><input type="checkbox" name="languages" value="python"> Python</label></li>
      <li><label><input type="checkbox" name="languages" value="java"> Java</label></li>
      <li><label><input type="checkbox" name="languages" value="csharp"> C#</label></li>
    </ul>
  </fieldset>
  <button type="submit">Submit</button>
</form>

In my form I am wrapping my inputs with the <label></label> tags for simpler UX but you could also separate the input and label.

<label for="js">JavaScript</label>
<input type="checkbox" id="js" name="language" value="javascript">

You'll notice some new tags <form><form> tags as a container for your form, <fieldset></fieldset> tags to group the related checkbox list items together, <legend></legend> tags to provide a title and give context to grouped elements, and the <button></button> tags to submit your form data to a server.

Final Thoughts

You have now learned how to create lists and when to use them on your website. Lists are a powerful tool to help organize your website content. Be sure to use them for your next project!