HTML Lists: Ordered, Unordered, and Definition Lists

Ordered lists are used to display a list of items in a specific order, with each item numbered. To create an ordered list, use the <ol> element, and nest the list items within it using the <li> element. For example:

  • Copy code

  • <ol>

PG9sPgogIDxsaT5JdGVtIDE8L2xpPgogIDxsaT5JdGVtIDI8L2xpPgogIDxsaT5JdGVtIDM8L2xpPgo8L29sPgo=

HTML lists are used to organize and structure content on the web. There are three types of HTML lists: ordered lists, unordered lists, and definition lists.

Ordered lists are used to display a list of items in a specific order, with each item numbered. To create an ordered list, use the <ol> element, and nest the list items within it using the <li> element. For example:

  • Copy code

<ol>

  • <li>Item 1</li>

  • <li>Item 2</li>

  • <li>Item 3</li>

  • </ol>

This will create an ordered list with the items "Item 1", "Item 2", and "Item 3", each numbered in the order they are listed.

Unordered lists are used to display a list of items that do not need to be presented in a specific order, with each item marked with a bullet point. To create an unordered list, use the <ul> element, and nest the list items within it using the <li> element. For example:

  • PHVsPgogIDxsaT5JdGVtIDE8L2xpPgogIDxsaT5JdGVtIDI8L2xpPgogIDxsaT5JdGVtIDM8L2xpPgo8L3VsPgo=

This will create an unordered list with the items "Item 1", "Item 2", and "Item 3", each marked with a bullet point.

Definition lists are used to display a list of terms and their definitions. To create a definition list, use the <dl> element, and nest the terms and definitions within it using the <dt> (definition term) and <dd> (definition description) elements. For example:

PGRsPgogIDxkdD5UZXJtIDE8L2R0PgogIDxkZD5EZWZpbml0aW9uIG9mIHRlcm0gMTwvZGQ+CiAgPGR0PlRlcm0gMjwvZHQ+CiAgPGRkPkRlZmluaXRpb24gb2YgdGVybSAyPC9kZD4KICA8ZHQ+VGVybSAzPC9kdD4KICA8ZGQ+RGVmaW5pdGlvbiBvZiB0ZXJtIDM8L2RkPgo8L2RsPgo=

This will create a definition list with the terms "Term 1", "Term 2", and "Term 3", each with their respective definitions.

HTML lists are an important tool for creating structured and organized content on the web, and are used on a wide variety of websites and web applications. They allow you to present information in a clear and easy-to-understand format, making it easier for users to digest and interact with your content.

Want us to build yours instead?

On a project, every milestone ends with a link to the working build, and the code, the accounts and every password are yours at the handover.

What we’d build for you is on Services.

Send us the brief, or start with the free call.

Page updated .

Privacy preferences

Choose whether this browser sends visit data to our analytics tools. The site works the same either way.

Google Analytics, Amplitude and Microsoft Clarity show us which pages get read. Off means none of the three loads.

Always on

Sentry error reports, with personal data removed, and the Cloudflare spam check on the brief form.

Each cookie is listed in our Cookie Policy.