Tag li

When organizing content on a webpage, lists are essential to display items clearly and concisely. The HTML <li> tag plays a central role in building both ordered and unordered lists. This article dives into what the <li> tag is, why it matters, and how to use it effectively with examples.

What is the <li> Tag?

The <li> tag defines a list item in HTML. It must be used inside either an <ul> (unordered list) or <ol> (ordered list) element.

Why Use <li>?

  • Organizes content: Breaks down information into manageable items.
  • Improves readability: Lists are easier to scan than paragraphs.
  • Supports different list types: Bulleted, numbered, or custom-styled lists.

Basic Syntax

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

Here, each <li> defines one item in an unordered (bulleted) list.

Examples of <li> in Action

1. Unordered List

<h3>Shopping List</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

Result: A bulleted list of grocery items.

2. Ordered List

<h3>Steps to Bake a Cake</h3>
<ol>
  <li>Preheat the oven to 350°F (175°C).</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Result: A numbered list showing sequential steps.

3. Nested Lists

Lists can be nested to create subcategories.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Result: A list with sub-lists for fruits and vegetables.

Styling <li> with CSS

You can customize list item markers and layout.

ul.custom-list li {
  list-style-type: square; /* changes bullet to square */
  color: #2a9d8f;
  font-weight: bold;
}

Visual Example: Custom Styled List

<ul class="custom-list">
  <li>Learn HTML</li>
  <li>Practice CSS</li>
  <li>Build Projects</li>
</ul>

Result: A list with teal square bullets and bold text.

Summary

  • The <li> tag defines individual items in a list.
  • It must be inside <ul> (unordered) or <ol> (ordered) lists.
  • Use nested <li>s for hierarchical lists.
  • Customize with CSS for unique designs.