HTML List Items - Web4learners

HTML list items are used to represent individual items within a list. The <li> tag defines a list item and is commonly used inside ordered lists (<ol>) and unordered lists (<ul>). List items help developers organize related information into a structured and readable format.

HTML list items are useful for navigation menus, step-by-step instructions, product features, categories, and nested lists. You can also customize their appearance using CSS.

What Is an HTML List Item?

An HTML list item is an element that represents one entry in a list. The <li> tag is used inside an ordered or unordered list to define each entry.

For example, a list of programming languages can contain separate list items for Java, Python, and JavaScript.

HTML List Item Syntax

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

In this example, each <li> element represents one programming language. The browser displays the items as a bulleted list because they are inside a <ul> element.

HTML List Items Example

The following example demonstrates how to use list items in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML List Items</title>
</head>
<body>

    <h1>HTML List Items</h1>

    <h2>Web Development Technologies</h2>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>React</li>
    </ul>

</body>
</html>

Save the code as index.html and open it in a browser. The browser displays four list items with bullet markers.

List Items in Ordered Lists

The <li> element can also be used inside an ordered list. In this case, the browser displays list items with numbers or another numbering style.

<ol>
    <li>Open a code editor</li>
    <li>Create an HTML file</li>
    <li>Write your HTML code</li>
    <li>Open the file in a browser</li>
</ol>

The browser numbers the items in sequence, making this format suitable for instructions and tutorials.

HTML List Item Attributes

The <li> element supports the value attribute when used in an ordered list. This attribute sets the number of a particular list item and affects the numbering of subsequent items.

Attribute	Description	Example
`value`	Specifies the number assigned to a list item in an ordered list.	`<li value="5">HTML</li>`

Example of the Value Attribute

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li value="5">JavaScript</li>
    <li>React</li>
</ol>

In this example, the list displays HTML as 1, CSS as 2, JavaScript as 5, and React as 6.

The value attribute is specific to ordered-list numbering. It does not provide the same numbering behavior in an unordered list.

Styling HTML List Items with CSS

You can customize list items using CSS properties such as color, font-size, margin, and padding.

<style>
    li {
        color: #1769aa;
        font-size: 18px;
        margin-bottom: 8px;
    }
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

This example changes the text color, increases the font size, and adds spacing between list items.

HTML List Item vs List Elements

Element	Purpose
`<li>`	Defines an individual list item.
`<ul>`	Creates an unordered list.
`<ol>`	Creates an ordered list.
`<dl>`	Creates a description list.
`<dt>`	Defines a term in a description list.
`<dd>`	Provides a description of a term.