HTML Lists

Let's untangle the ropes of creating ordered and unordered lists by exploring the use of <ol>, <li>, and <ul> tags.

Ordered Lists

First things first, let's take a gander at ordered lists. An ordered list is created using the <ol> tag. Each item within the list is defined using the <li> tag.

<ol>
  <li>First stop: New Orleans</li>
  <li>Second stop: Baton Rouge</li>
  <li>Third stop: Natchez</li>
</ol>

The example above will show up on your webpage as follows:

  1. First stop: New Orleans
  2. Second stop: Baton Rouge
  3. Third stop: Natchez

As you see, the browser automatically numbers the list for you, starting at 1 and incrementing with each new list item.

Unordered Lists

Next, let's mosey on over to the world of unordered lists. Unordered lists are created using the <ul> tag, which, like the <ol> tag, sets the boundaries of the list. But unlike an ordered list, items in an unordered list aren't numbered.

<ul>
  <li>Buffalo</li>
  <li>Antelope</li>
  <li>Grizzly Bear</li>
</ul>

The example above will appear on your webpage as:

So, there you have it, those are your HTML Lists. Much like a good story, HTML lists give structure to our content, making it digestible and engaging. But remember, the real magic lies not in the lists themselves, but in how we use them.

Previous Next

Written © 2024 Written Developer Tutorials and Posts.

𝕏