🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

REFERENCEhtml

html Documentation

📖 INDEX

# blockquote-tag

# INPUT Attributes

# JavaScript-in-HTML

# Radio Buttons

# Twitter Cards

# JavaScript in HTML

LOADING ENGINE...

HTML List Item Tag

Structure your content with lists. Learn the <li> tag inside <ul> and <ol>.

list-items.html

<ul>

<li>Item one</li>

</ul>

📄

Interactive Lesson Script

Lists give structure to items. The <li> tag defines one list item. It must live inside <ul> (unordered) or <ol> (ordered).

<li>

A <li> tag wraps one item. You need an opening <li> and a closing </li>. Everything between them is that list item.

<ul><li>

Now we add the item content and close the tag. Each <li> is one bullet or number inside the list.

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

In the browser, <ul> shows bullets and <ol> shows numbers. Screen readers announce “list of N items”.

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

Checkpoint: Inside which tag must <li> appear?

<ul><li>Item</li></ul>

Correct. <li> must be a direct child of <ul> or <ol>. Never use <li> alone for layout.

<ul><li>Item</li></ul>

Now it's your turn. List items are the building blocks of lists. Complete the challenges below to master the <li> tag!

list-items.html

1 / 7

📄

Tutor:Lists give structure to items. The <li> tag defines one list item. It must live inside <ul> (unordered) or <ol> (ordered).

⭐ 0 EXP

List Item Mastery

Unlock nodes by learning list item and ul/ol structures.

Concept 1: The List Item

The <li> tag defines a list item. It must sit inside <ul> (unordered) or <ol> (ordered) to be valid.

System Check

Inside which containers can <li> appear?

Only <ul>Only <ol><ul> or <ol>Any block element

Community Holo-Net

Showcase Your Lists

Built a list or navigation? Share your ul/ol/li structures.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML List Item Tag

Pascual Vila

Frontend Instructor.

List items are the building blocks of lists. The <li> tag defines one item and must sit inside <ul> or <ol>.

Block-Level Element

<ul> creates bullet lists; <ol> creates numbered lists. Each <li> is one item. Always close with </li>.

Opening and Closing

Always close each list item with </li>. Valid HTML and accessibility depend on proper list structure.

Accessibility

Screen readers announce “list of N items” when they find <ul>/<ol> and <li>. Use lists for real list content, not for layout.

List Item Tag Glossary

<li> (List Item): The HTML element that defines one item inside <ul> or <ol>.
Block-level: <ul> is unordered (bullets); <ol> is ordered (numbers). <li> must be a direct child.
Closing tag </li>: Required to end each list item. Do not use <li> outside <ul> or <ol>.
Semantics: Using <ul>/<ol> and <li> helps screen readers and SEO understand list structure.