What type of HTML list will automatically place a number in front of the items?

HTML5Pioneer OPG image

Online, one of the most commonly asked questions is what type of HTML list will automatically place a number in front of the items? Well, the answer is pretty simple, though we don’t blame you for not knowing the answer to this difficult question. The answer is…

An Ordered List.

Also commonly referred to in shorthand as an OL, ordered lists are one of the most commonly uses things in HTML and the likelihood is if you’re learning about this kind of stuff this won’t be the last time that you have to look at ordered lists.

What is the code for an Ordered List?

Well, the code is as follows;

<ol>

<li>One</li>

<li>Two</li>

<li>Three</li>

</ol>

Now, if you write this in the text part of your WordPress or other CMS system, it should appear as below;

  1. One
  2. Two
  3. Three

Ordered lists are extremely useful for your website and will help the appearance drastically. There’s also some research that using an ordered list will make you more apparent and credible in Google’s eyes, which is an advantage for any SEO’s out there.

Ok.. So what’s the code for an unordered list?

Well, it’s extremely similar as you might expect. See below;

<ul>

<li>One</li>

<li>Two</li>

<li>Three</li>

</ul>

This should appear as so;

  • One
  • Two
  • Three

Unordered lists definitely have their place in HTML too, and are actually more frequently uses amongst marketers who do not want to list their items in order.

Which should I use?

Well, it’s completely down to the individual whether or not you want to list your items or you wish to use a less-ordered option. If you’re creating a shopping list, use an ordered list. If you’re making bullet points about the benefits of healthy eating, then an unordered list would be the best option to use.

Thanks for the help!

That’s absolutely fine. Here at html5pioneer.com, we love to help you guys out. For any more queries you have about HTML or anything related, make sure to hit the contact button at the bottom of the page!