HTML MASTER CLASS /// LEARN LISTS /// ORGANIZE DATA /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN LISTS /// ORGANIZE DATA /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN LISTS /// ORGANIZE DATA /// SEMANTIC WEB ///

HTML Unordered Lists

Group related items together with bullets using UL and LI tags.

unordered-list.html
1 / 11
12345
📝

Tutor:Unordered lists are used to group related items where the order doesn't matter, like a grocery list. In HTML, we start with the parent container tag: <ul>.


Skill Matrix

UNLOCK NODES BY MASTERING LISTS.

Concept: The Container

The <ul> tag creates the box for your list. It stands for Unordered List.

System Check

Can <ul> contain text directly?


Community Holo-Net

Showcase Your Lists

ACTIVE

Created a complex nested navigation menu? Share your structure.

HTML Unordered Lists

Author

Pascual Vila

Frontend Instructor // Code Syllabus

An Unordered List is a collection of related items that have no special order or sequence. They are typically created with bullet points.

The Container: <ul>

The <ul> tag defines the list. It tells the browser that a list is starting. However, you cannot put text directly inside it; it can only contain <li> elements.

The Items: <li>

The <li> tag stands for List Item. Every bullet point on your page must be wrapped in these tags.

Nesting Lists

You can put a list inside another list. This is called nesting. The key rule is that the nested <ul> must be inside an <li>, not directly inside the parent <ul>.

View Full Transcript+

This section contains the full transcript regarding HTML Unordered Lists. It covers the syntax of opening and closing UL tags, the requirement of LI tags for content, and the specific rules for nesting lists to create hierarchies like menus.

List Architecture Glossary

<ul>
Unordered List. The container element for a collection of items where order doesn't matter.
<li>
List Item. Used to define each individual entry within any type of HTML list.
Nesting
The process of placing one list inside a list item (li) of another list to create sub-menus.
list-style-type
CSS property used to change the appearance of the list item marker (disc, circle, square, none).