Member Avatar for AntonyRayan

What is difference between UL and OL in HTML?

  • 8 Contributors
  • 9 Replies
  • 556 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Oliver Realize

Dani AI

Generated

Quick practical guide for : the visible difference is numbers vs bullets, but the real decision is semantic — pick the element that best represents the meaning you want to convey. Use an ordered list when the sequence or label matters (step-by-step instructions, ranked results, chronological items); use an unordered list when items are a collection where order doesn’t change meaning (features, tag lists, simple menus). This helps other developers, browsers, and assistive tech understand the content. (developer.mozilla.org)

Accessibility and markup rules matter more than appearance. Native lists expose an implicit list / listitem role and require only li, script, or template as direct children — get the nesting and closing tags right so screen readers can announce the list correctly. If you remove markers with CSS (for example list-style: none;) be aware some user agents (notably Safari) may stop exposing the element as a list unless you restore semantics (for example add role="list" or ensure pseudo-content that conveys structure). Prefer semantic <ul>/<ol>/<li> over ARIA roles; use ARIA list roles only as a fallback when you can’t change the HTML. (developer.mozilla.org)

Presentation tips and a quick trick: <ol> supports start and reversed (and type for legacy numbering), but prefer CSS for visual styling (list-style-type) and use CSS counters for advanced numbering (nested outlines, custom sequences). Example of a simple nested-numbering approach:

ol { counter-reset: section; list-style-type: none; }

ol li {
  counter-increment: section;
}

ol li::before {
  content: counters(section, ".") " ";
}

Use lists for content, not for page layout; wrap navigation lists in <nav> and use aria-current="page" for the active item when applicable. This builds clearer, more maintainable, and more accessible HTML — and ties back to the examples and points raised by , , and others in the thread. (developer.mozilla.org)

Recommended Answers

All 9 Replies

Member Avatar for Lau_1

ul - unordered list (bulleted list)
ol - ordered list (numbered list)

Member Avatar for JorgeM

Its all about Semantics. When a search engine crawls your site, you want to make sure that are using the best HTML elements that will describe the content within them.

Member Avatar for Member #120589

Interesting. However, could you not find this info with a simple search Antony?

Member Avatar for drjohn

1 - do this step first
2 - do this bit second
3 - do this step next

. buy onions
. buy potatoes
. buy milk
. buy steak

first is an ordered list, second is unordered list

Member Avatar for ErickShawn

With <ol> list the order is important. While with the <ul> list the order is not important. e.g.

<p>Tomorrow I will</p>
<ol>
 <li>Wake up</li>
 <li>Have breakfast</li>
 <li>Go to school</li>
</ol>
<p>During breakfast, I will eat</p>
<ul>
 <li>Butter</li>
 <li>Eggs</li>
 <li>Bacon</li>
</ul>
Edited by pritaeas because: Added markdown.
Member Avatar for AntonyRayan

I know Mr diafol. But I want to know more explanation about ol and ul.
Thank you Mr diafol.

Member Avatar for AntonyRayan

What is the use of using ol and ul in a HTML Page

Member Avatar for Oliver Realize

ol or ordered list will typically have numbers instead of bullet points
ul or un-ordered list will typically have bullet points

Edited by Oliver Realize
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.