HTML Unordered Lists

Use <ul> for a collection where the sequence is not important. Each item belongs in an <li> element.

Basic unordered list Top ↑

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

• HTML
• CSS
• JavaScript

Change bullet markers with CSS Top ↑

The old type attribute on <ul> is deprecated. Use CSS list-style-type instead.

ul { list-style-type: square; }

• Square marker
• Another item

Other marker styles Top ↑

.circle-list { list-style-type: circle; }
.no-marker { list-style-type: none; }

Nested unordered lists Top ↑

<ul>
  <li>Frontend
    <ul><li>HTML</li><li>CSS</li></ul>
  </li>
</ul>

Open styled-list demo →

Related tutorials Top ↑

HTML Lists · Ordered Lists · Description Lists

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: