HTML Lists (Live Playground)

Introduction

Lists are a common way to organize and present information on web pages. HTML provides three types of lists: ordered lists, unordered lists, and description lists. In this tutorial, you will learn how to create and style each type of list using HTML elements.

Ordered Lists

Ordered lists are used to present items in a numbered sequence. To create an ordered list, use the <ol> element to define the list container and the <li> element to define each list item.

HTML

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This code will produce a numbered list with three items.

Live Playground, Try it Yourself

Unordered Lists

Unordered lists are used to present items in a bulleted format, without a specific order. To create an unordered list, use the <ul> element to define the list container and the <li> element to define each list item.

HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

This code will produce a bulleted list with three items.

Live Playground, Try it Yourself

Description Lists

Description lists are used to present a list of terms and their corresponding descriptions. To create a description list, use the <dl> element to define the list container, the <dt> element to define each term, and the <dd> element to define each description.

HTML

<dl>
  <dt>Term 1</dt>
  <dd>Description of Term 1</dd>
  <dt>Term 2</dt>
  <dd>Description of Term 2</dd>
  <dt>Term 3</dt>
  <dd>Description of Term 3</dd>
</dl>

This code will produce a description list with three terms and their corresponding descriptions.

Live Playground, Try it Yourself

Nesting Lists

You can also nest lists within other lists to create sublists. To do this, simply include a new list (either ordered or unordered) within an <li> element.

HTML

<ul>
  <li>First item</li>
  <li>
    Second item
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Third item</li>
</ul>

This code will produce an unordered list with three items, where the second item contains a nested unordered sublist with two items.

Live Playground, Try it Yourself

Styling Lists

By default, ordered and unordered lists are indented and styled with either numbers (ordered) or bullets (unordered). However, you can use CSS to customize the appearance of your lists, such as changing the list style type, removing indentation, or adding custom markers.

Here's an example of how to style an unordered list with square bullets using inline CSS:

HTML

<ul style="list-style-type: square;">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

For more advanced styling, it's recommended to use an external CSS file.

Live Playground, Try it Yourself

Conclusion

HTML lists are essential for organizing and presenting information effectively on web pages. In this tutorial, you learned how to create ordered, unordered, and description lists, as well as how to nest lists and apply basic styling.

As you continue to develop your web development skills, you'll encounter more advanced techniques for styling and manipulating lists using CSS and JavaScript. Keep practicing and experimenting with different list types and styles to create engaging and accessible web pages.