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.