` elements. Do not put ``, ``, or any other element between `` and its terms and details.
+:::
+
+## What Goes Inside `` and ` `?
+
+- A **` `** holds the term. Keep it short and text-like. Do not put headings or sectioning elements inside it.
+- A **` `** can hold anything flow content allows: text, links, images, paragraphs, and even other lists.
+
+```html
+
+ Languages
+
+
+ HTML
+ CSS
+ JavaScript
+
+
+
+```
+
+## Real-World Examples
+
+### 1. A Glossary
+
+The classic use. Pair the `` element (the term being defined) with a `` for extra clarity.
+
+
+
+
+```html title="index.html"
+Web glossary
+
+ Browser A program that opens and displays web pages.
+
+ Server A computer that stores web pages and sends them to browsers.
+
+ URL The address of a page or file on the web.
+
+```
+
+
+
+
+
+<>
+Web glossary
+
+ Browser A program that opens and displays web pages.
+
+ Server A computer that stores web pages and sends them to browsers.
+
+ URL The address of a page or file on the web.
+
+
+
+
+
+
+
+You met `` in [Semantic Text](/tutorials/html/text-content/semantic-text). Here it marks the exact place where each term is defined.
+
+### 2. Product Details or Specs
+
+Specs are labels paired with values, so `` is the natural choice. A table works too when you compare many products, but for one item a description list is lighter.
+
+
+
+
+```html title="index.html"
+Trail Backpack
+
+
+
Capacity
+ 30 liters
+
+
+
Weight
+ 1.1 kg
+
+
+
Colors
+ Green, black, orange
+
+
+```
+
+
+
+
+
+<>
+Trail Backpack
+
+
+
Capacity
+ 30 liters
+
+
+
Weight
+ 1.1 kg
+
+
+
Colors
+ Green, black, orange
+
+
+
+
+
+
+
+
+### 3. Article Metadata
+
+Author, date, and category are classic name-value pairs.
+
+```html
+
+ Author
+ Mateo Alvarez
+
+ Published
+ 5 October 2026 Category
+ HTML
+```
+
+### 4. An FAQ
+
+A question paired with its answer is a name-value pair, too. Many sites use `` for FAQs.
+
+
+
+
+```html title="index.html"
+Frequently asked questions
+
+ Is HTML a programming language?
+ No. It is a markup language that describes the structure of content.
+
+ Do I need to install anything?
+ No. A text editor and a browser are enough.
+
+```
+
+
+
+
+
+<>
+Frequently asked questions
+
+ Is HTML a programming language?
+ No. It is a markup language that describes the structure of content.
+
+ Do I need to install anything?
+ No. A text editor and a browser are enough.
+
+
+
+
+
+
+
+:::tip Want collapsible answers?
+For an FAQ where the answers expand and collapse, the `` and `` elements are a better fit. Choose `` when all answers should stay visible.
+:::
+
+## Styling a Description List
+
+Browsers give a plain look. A little CSS turns it into a clean "label and value" layout.
+
+
+
+
+```html title="index.html"
+
+
+
+
Capacity 30 liters
+
Weight 1.1 kg
+
Colors Green, black, orange
+
+```
+
+
+
+
+
+<>
+
+ {[
+ ["Capacity", "30 liters"],
+ ["Weight", "1.1 kg"],
+ ["Colors", "Green, black, orange"],
+ ].map(([term, detail]) => (
+
+
{term}
+ {detail}
+
+ ))}
+
+
+
+
+
+
+
+Here are other common touches:
+
+- Make `` **bold** to set it apart.
+- Remove the default `margin-left` on ` ` for a compact look.
+- Use CSS Grid (`grid-template-columns`) for aligned label and value columns.
+- Use `` groups to add borders or backgrounds to each pair.
+
+## Description List or Table?
+
+Both show labels and values. How do you pick?
+
+| Use `
` when... | Use `` when... |
+| :-- | :-- |
+| One item has several properties | Many items share the same properties |
+| Each label has one (or a few) values | You need rows **and** columns |
+| You want a lightweight, readable block | You want to compare across rows |
+| Example: one product's specs | Example: ten products side by side |
+
+## Accessibility at a Glance
+
+- Screen readers can announce a description list and move through its terms and details. Support has improved over the years, but it still varies between tools, so keep the content clear without depending on structure alone.
+- **Keep every `` paired** with a ` `. A detail without a term is confusing.
+- Put the **term first**, then its description.
+- Do not use ` ` just to indent text or build a layout. Use CSS for that.
+- Write terms and details so they make sense when read aloud: "Weight, 1.1 kilograms."
+- For a global audience, include units (kg, liters) and spell out formats (such as dates) to avoid confusion across regions.
+
+## Common Mistakes to Avoid
+
+1. **Using `` for plain bullet items.** If there is no name and value, use ``.
+2. **Putting `` before ` `.** The term comes first.
+3. **Wrapping pairs in elements other than ``.** Only a plain `
` is allowed inside `
`.
+4. **Putting `` or `
` directly inside ``.** Only ``, ` `, and grouping `` elements belong there.
+5. **Using headings inside `
`.** Keep terms short and simple.
+6. **Using ` ` for layout** such as an image next to a caption. Use `` or CSS.
+7. **Leaving a term with no details** (or the reverse).
+8. **Forgetting to style it.** The default look is plain, so a little CSS goes a long way.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Build a glossary with four web terms, and wrap each term in ``.
+2. Write a "contact card" with Name, Email, and City as a ``.
+3. Give one term two descriptions.
+4. Give one description two terms (for example, two spelling variants).
+5. Wrap each pair in a ``, then add a border under each with CSS.
+6. Make the terms bold and give them a fixed width, so the values line up.
+7. Put a bullet list inside one `
`.
+8. Write a three-question FAQ with a ``.
+9. Add an article's author, date, and category, and use `` for the date.
+10. Bonus: build the same data as a ``, then decide which fits better.
+
+
+1. Which three elements make a description list?
+
+`` is the list, `` is the term, and ` ` is the description of that term.
+
+
+
+
+2. What kind of content suits a description list?
+
+Name-value pairs: glossary terms and meanings, product specs, contact details, article metadata, and FAQs.
+
+
+
+
+3. Can one term have several descriptions?
+
+Yes. You can place several `` elements after a ` `, and you can also put several `` elements before one ` `.
+
+
+
+
+4. How can you group a term and its details for easier styling?
+
+Wrap them in a `` inside the `
`. A plain `` is the only wrapper allowed.
+
+
+
+
+5. How do you choose between `` and ``?
+
+Use `` for one item's properties. Use `` when many items share the same properties and you need to compare across rows and columns.
+
+
+
+## Key Takeaways
+
+- A description list pairs **terms** with **descriptions** using ``, ``, and ` `.
+- It fits glossaries, specs, metadata, and FAQs, anywhere you have a name and a value.
+- One term can have several descriptions, and several terms can share one description.
+- A plain `` can group each pair, which makes styling easy.
+- Keep terms short, put the term before the details, and use CSS for appearance and layout.
+
+So far, each list has been flat. What if an item needs its own sub-list? That is the job of [Nested Lists](./nested-lists). You can also go back to the [Lists overview](/tutorials/html/lists).
\ No newline at end of file
diff --git a/tutorials/html/06-lists/index.mdx b/tutorials/html/06-lists/index.mdx
index ce8eb3ddd..d0e21507a 100644
--- a/tutorials/html/06-lists/index.mdx
+++ b/tutorials/html/06-lists/index.mdx
@@ -1,16 +1,410 @@
---
id: lists-overview
-title: "Working with HTML Lists"
+title: "HTML Lists"
sidebar_label: "Lists"
sidebar_position: 1
slug: /html/lists
-description: "Master HTML list types including unordered, ordered, and description lists, nested list hierarchies, and accessibility best practices with CodeHarborHub."
+description: "Learn how to organize content with HTML lists. Understand unordered lists, ordered lists, description lists, nested lists, list styling with CSS, and accessible lists, with live examples and beginner-friendly explanations on CodeHarborHub."
keywords:
- - HTML lists overview
- - HTML list elements
- - unordered vs ordered lists
- - web list structuring
+ - HTML lists
+ - HTML ul ol li
+ - HTML unordered list
+ - HTML ordered list
+ - HTML description list
+ - HTML dl dt dd
+ - HTML nested lists
+ - HTML list styling
+ - HTML accessible lists
+ - ul vs ol
+ - learn HTML lists
- CodeHarborHub HTML
-authors: [ajay-dhangar]
-tags: [html, lists, markup, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, lists, ul, ol, dl, frontend]
+---
+
+Think about the last time you went shopping, followed a recipe, or checked a to-do list. You did not read a long paragraph. You read **short lines, one after another**. Lists are one of the oldest and most natural ways humans organize information, and the web is full of them.
+
+Even where you do not notice them, lists are working. A navigation menu is a list of links. A table of contents is a list of sections. A set of product features, a series of steps, a glossary of terms: all lists. In this section, you will learn how HTML marks them up, so that your content is easy to scan for people and easy to understand for browsers, search engines, and screen readers.
+
+
+
+
+## What You Will Learn
+
+In this section, you will be able to:
+
+- Create **bullet lists** with `
` and ``
+- Create **numbered lists** with ``, and control their start, direction, and numbering style
+- Create **term and definition lists** with ``, ``, and ` `
+- Put lists **inside other lists** the right way
+- Change markers, spacing, and layout with **CSS**
+- Make lists **accessible** and meaningful for everyone
+
+:::info Prerequisites
+You should know what an HTML element and an attribute are. If you need a refresher, review [Paragraphs](/tutorials/html/text-content/paragraphs) and [Headings](/tutorials/html/text-content/headings) first.
+:::
+
+## Your First List
+
+Here is the smallest useful list: a bullet list of three items.
+
+
+
+
+```html title="index.html"
+
+ HTML
+ CSS
+ JavaScript
+
+```
+
+
+
+
+
+<>
+
+ HTML
+ CSS
+ JavaScript
+
+
+
+
+
+
+
+There are two parts here:
+
+- **``** is the **list container**. It says: "a group of related items starts here."
+- **``** is a **list item**. Each one is a single entry in the group.
+
+You will see this "container plus items" pattern in every kind of HTML list.
+
+## The Three Kinds of Lists
+
+HTML gives you three list types. Each answers a different question.
+
+| Type | Elements | Question it answers | Example |
+| :-- | :-- | :-- | :-- |
+| **Unordered list** | `` and `` | "What are the items?" (order does not matter) | Ingredients, features, tags |
+| **Ordered list** | `` and `` | "What are the items **in sequence**?" (order matters) | Steps, rankings, instructions |
+| **Description list** | ``, ``, and ` ` | "What is this term, and what does it mean?" | Glossaries, FAQs, metadata |
+
+Let's see all three side by side.
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ Mix the dry ingredients.
+ Add the eggs and milk.
+ Bake for 20 minutes.
+
+
+
+
+ Preheat
+ Warm the oven before baking.
+ Whisk
+ Beat quickly to add air.
+
+```
+
+
+
+
+
+<>
+
+
+
+ Mix the dry ingredients.
+ Add the eggs and milk.
+ Bake for 20 minutes.
+
+
+
+ Preheat
+ Warm the oven before baking.
+ Whisk
+ Beat quickly to add air.
+
+
+
+
+
+
+
+## Which List Should I Use?
+
+The most common beginner question is "ul or ol?" Use this quick test.
+
+> **If you shuffled the items, would the meaning change?**
+
+- **No:** use ``. A shopping list works in any order.
+- **Yes:** use ``. Recipe steps in the wrong order ruin the dish.
+- **Is each entry a name paired with a description?** Use ``.
+
+| Content | Best list | Why |
+| :-- | :-- | :-- |
+| Items to pack for a trip | `` | Any order is fine |
+| Steps to install a tool | `` | You must follow the sequence |
+| Top 5 programming languages | `` | The ranking is the point |
+| Features of a product | `` | They are equal in importance |
+| Glossary of tech words | `` | Each term has a definition |
+| A website's main menu | `` | A group of related links |
+| Author, date, and category of an article | `` | Names paired with values |
+
+:::tip Do not choose by looks
+Beginners sometimes pick `` because they like numbers, or `` because they like bullets. Pick by **meaning**. You can change how a list looks with CSS later, but you cannot fix meaning with CSS.
+:::
+
+## Why Not Just Use Paragraphs or `
+
+
+```html
+
+ - HTML
+```
+
+
+
+
+```html
+
+ HTML
+ CSS
+ JavaScript
+
+```
+
+
+
+
+A real list gives you things a fake one cannot:
+
+- **Screen readers announce it.** Users hear "list, 3 items," and can jump from item to item.
+- **Browsers and search engines understand it.** They know these lines belong together.
+- **CSS can style it.** Spacing, markers, and layout are easy to control.
+- **It is easy to maintain.** Adding, moving, or removing an item is simple and safe.
+
+## Lists You Already Use Every Day
+
+Once you know what to look for, lists are everywhere on the web.
+
+| On a website | Marked up as |
+| :-- | :-- |
+| Navigation menu | `` inside a `` |
+| Breadcrumb trail (Home > Courses > HTML) | `` |
+| Search results | `` or `` |
+| Pricing plan features | `` |
+| FAQ questions and answers | `` |
+| Comments under an article | `` or `` |
+| "How to" tutorial steps | `` |
+
+You already met the first one in [Navigation Menus](/tutorials/html/links-and-navigation/navigation-menus), where a list of links became a full menu.
+
+## Your Learning Path
+
+Follow the lessons in order. Each one builds on the one before.
+
+` goes directly inside `` and ``.** Text, headings, or paragraphs placed straight inside them are invalid.
+2. **Only `` and ` ` go inside ``.** You can also group each pair in a ``.
+3. **Anything can go inside an `
`:** text, links, images, even other lists.
+4. **Do not skip levels or mix up the containers.** A nested list belongs *inside* an ` `, not beside it.
+5. **Do not use lists only for indentation.** Lists carry meaning. If the content is not a list, do not mark it as one.
+
+
+
+
+```html
+
+ HTML
+ CSS
+ Some loose text
+
+```
+
+
+
+
+```html
+
+ HTML
+ CSS
+ Some text, now inside an item
+
+```
+
+
+
+
+## A Real-World Example
+
+Lists often work together. This small course card uses all three types in one place.
+
+
+
+
+```html title="index.html"
+Intro to HTML
+
+
+ Level
+ Beginner
+ Duration
+ 4 weeks
+
+
+What you will learn
+
+ Page structure
+ Text, links, and images
+ Lists and tables
+
+
+How the course works
+
+ Read the lesson.
+ Try the example.
+ Complete the practice.
+
+```
+
+
+
+
+
+<>
+Intro to HTML
+
+
+ Level
+ Beginner
+ Duration
+ 4 weeks
+
+
+What you will learn
+
+ Page structure
+ Text, links, and images
+ Lists and tables
+
+
+How the course works
+
+ Read the lesson.
+ Try the example.
+ Complete the practice.
+
+
+
+
+
+
+
+## Common Beginner Mistakes
+
+Here are a few traps worth knowing about before you start. Each one has a lesson later.
+
+| Mistake | What goes wrong | Where you will fix it |
+| :-- | :-- | :-- |
+| Using `` or `` by looks | Wrong meaning, wrong announcements | [Unordered Lists](./lists/unordered-lists), [Ordered Lists](./lists/ordered-lists) |
+| Putting text or `` directly inside `
` | Invalid HTML | [Unordered Lists](./lists/unordered-lists) |
+| Placing a nested list outside an `` | Broken structure | [Nested Lists](./lists/nested-lists) |
+| Using `` for ordinary bullet items | Terms and definitions that do not exist | [Description Lists](./lists/description-lists) |
+| Removing bullets with CSS and losing the list meaning | Some screen readers stop announcing the list | [Accessible Lists](./lists/accessible-lists) |
+
+## Lists for a Global Audience
+
+Lists travel across languages and cultures well, but a few habits help.
+
+- **Keep items short and parallel.** Start each item the same way ("Install...", "Create...", "Run..."). Translation tools handle short, regular lines best.
+- **Remember that numbering styles differ.** Some languages use their own numerals, and right-to-left languages place markers on the right. CSS can handle both.
+- **Do not rely on the visual marker alone.** In an ordered list, the meaning of "step 3" should be clear from the content too.
+- **Set the `lang` attribute** on your page so assistive tools read the list in the right language.
+
+
+1. Which element holds the items of a bullet list, and which holds each item?
+
+`` is the container, and each item is an ``.
+
+
+
+
+2. When should you choose `` over `
+
+When the order of the items matters, such as steps, rankings, or instructions.
+
+
+
+
+3. Which three elements make a description list?
+
+`` is the list, `` is a term, and ` ` is its description.
+
+
+
+
+4. What can go directly inside a `
+
+Only `` elements. Anything else must go inside an ` `.
+
+
+
+
+5. Why is a real list better than lines separated by `
+
+A real list has meaning. Screen readers announce it, search engines understand it, and CSS can style it. A fake list is only text that looks like a list.
+
+
+
+## Key Takeaways
+
+- HTML has three list types: `` for unordered items, `` for ordered items, and `` for terms and descriptions.
+- Choose by meaning. If shuffling the items would change the sense, use ``.
+- Only `` belongs directly inside `` and ``, and only `` and ` ` inside ``.
+- Lists are everywhere: menus, steps, glossaries, and features. Real lists help screen readers, search engines, and you.
+- Keep items short and parallel, so your content works well across languages.
+
+Ready to begin? Start with [Unordered Lists](./lists/unordered-lists).
\ No newline at end of file
diff --git a/tutorials/html/06-lists/list-styling.mdx b/tutorials/html/06-lists/list-styling.mdx
new file mode 100644
index 000000000..90f767728
--- /dev/null
+++ b/tutorials/html/06-lists/list-styling.mdx
@@ -0,0 +1,702 @@
+---
+id: html-list-styling
+title: "Styling HTML Lists with CSS"
+sidebar_label: "Styling Lists"
+sidebar_position: 6
+slug: /html/lists/list-styling
+description: "Learn how to style HTML lists with CSS. Change bullet and number styles with list-style-type, control marker position, use custom images and the ::marker pseudo-element, remove bullets safely, build horizontal menus, add spacing, and number lists in other writing systems on CodeHarborHub."
+keywords:
+ - CSS list-style-type
+ - CSS list-style-position
+ - CSS list-style-image
+ - CSS ::marker
+ - remove bullets from list
+ - horizontal list CSS
+ - custom bullets CSS
+ - list-style none accessibility
+ - decimal-leading-zero
+ - style HTML lists
+ - learn HTML lists
+ - CodeHarborHub HTML
+tags: [html, css, web-development, beginner, lists, styling, frontend]
+---
+
+Browsers give every list the same plain look: round bullets, plain numbers, and a wide left indent. It is clear and readable, but it is rarely what a finished design needs. A menu should have no bullets. A checklist might want check marks. A "top 10" might want numbers like 01, 02, 03.
+
+The good news: **you never need to change your HTML to do any of this.** The list stays a list. CSS only changes how it *looks*. In this lesson, you will learn the properties that control markers, position, spacing, and layout.
+
+ ` in a list has two parts:
+
+1. The **marker**: the bullet, number, or letter.
+2. The **content**: the text or elements inside the item.
+
+Most list properties control the marker. Others control the box around the whole list.
+
+| Part | Properties |
+| :-- | :-- |
+| Marker | `list-style-type`, `list-style-image`, `list-style-position`, `::marker` |
+| Whole list | `padding`, `margin`, `display`, `gap` |
+| Shorthand | `list-style` |
+
+## `list-style-type`: Choose the Marker
+
+This property sets the marker's shape or numbering style.
+
+### For Bullet Lists
+
+| Value | Marker |
+| :-- | :-- |
+| `disc` | Solid circle (default) |
+| `circle` | Hollow circle |
+| `square` | Solid square |
+| `none` | No marker |
+
+### For Numbered Lists
+
+| Value | Marker |
+| :-- | :-- |
+| `decimal` | 1, 2, 3 (default) |
+| `decimal-leading-zero` | 01, 02, 03 |
+| `lower-alpha` | a, b, c |
+| `upper-alpha` | A, B, C |
+| `lower-roman` | i, ii, iii |
+| `upper-roman` | I, II, III |
+| `lower-greek` | α, β, γ |
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ First
+ Second
+ Third
+
+
+
+ Plan
+ Build
+ Launch
+
+```
+
+
+
+
+
+<>
+
+
+
+
+
+ First
+ Second
+ Third
+
+
+
+ Plan
+ Build
+ Launch
+
+
+
+
+
+
+
+In a real project, put the styles in a stylesheet, not in a `style` attribute:
+
+```css title="style.css"
+ul.features {
+ list-style-type: square;
+}
+
+ol.steps {
+ list-style-type: decimal-leading-zero;
+}
+```
+
+:::tip Use a class
+Targeting every `ul` on the page changes menus, footers, and everything else. Give your styled lists a class (`.features`, `.steps`) so changes stay where you want them.
+:::
+
+## `list-style-position`: Inside or Outside?
+
+This sets where the marker sits compared to the text block.
+
+| Value | Meaning |
+| :-- | :-- |
+| `outside` (default) | The marker hangs in the margin. Wrapped lines align with the **text**. |
+| `inside` | The marker sits inside the text box. Wrapped lines go back **under the marker**. |
+
+
+
+
+```html title="index.html"
+
+ Outside: when this item is long enough to wrap, the second line lines up under the first word of the text.
+
+
+
+ Inside: when this item is long enough to wrap, the second line begins under the bullet itself.
+
+```
+
+
+
+
+
+<>
+
+ Outside: when this item is long enough to wrap, the second line lines up under the first word of the text.
+
+
+
+ Inside: when this item is long enough to wrap, the second line begins under the bullet itself.
+
+
+
+
+
+
+
+`outside` is easier to read for multi-line items, which is why it is the default. Use `inside` when you want the marker to be part of a centered or boxed item.
+
+## `list-style-image`: Use a Picture as the Marker
+
+You can replace the bullet with an image, such as a small check mark or arrow.
+
+```css title="style.css"
+ul.checklist {
+ list-style-image: url("images/check.svg");
+}
+```
+
+This is simple, but limited. You cannot easily resize or recolor the image, and its vertical alignment can look off. For more control, use the techniques in the next sections.
+
+## `::marker`: Style the Marker Itself
+
+The `::marker` pseudo-element targets the bullet or number only, not the text. You can change its color, size, and font.
+
+```css title="style.css"
+li::marker {
+ color: #2563eb;
+ font-weight: 700;
+}
+
+ol.steps li::marker {
+ font-size: 1.2em;
+}
+```
+
+With this, the bullets turn blue while the text stays the same color. It is the easiest way to add a splash of style.
+
+:::note What `::marker` can change
+It supports a limited set of properties: `color`, `font-*` properties, `content`, and a few others. It cannot change spacing, background, or size of the marker box. For those, use the custom marker technique below.
+:::
+
+## Custom Markers with `content`
+
+Because `::marker` accepts the `content` property, you can set any text or emoji as the marker.
+
+```css title="style.css"
+ul.checklist li::marker {
+ content: "✓ ";
+ color: #16a34a;
+}
+
+ul.arrows li::marker {
+ content: "→ ";
+}
+```
+
+Browser support for `content` in `::marker` is good in modern browsers. For full control and the oldest browsers, you can remove the marker and draw your own with `::before`:
+
+```css title="style.css"
+ul.custom {
+ list-style: none;
+ padding-left: 0;
+}
+
+ul.custom li {
+ position: relative;
+ padding-left: 1.5rem;
+}
+
+ul.custom li::before {
+ content: "★";
+ position: absolute;
+ left: 0;
+ color: #f59e0b;
+}
+```
+
+Here is a live example of the idea, using real characters as the markers:
+
+
+<>
+
+ {["Free to learn", "Works on any device", "No setup needed"].map((text) => (
+
+ ✓
+ {text}
+
+ ))}
+
+
+
+
+:::warning Decorative markers and meaning
+Marker text added with CSS is not part of your HTML. Some screen readers read it, and some do not. Use CSS markers for **decoration**, like ticks and stars. Never use them for information that must not be missed, such as "Warning" or "Required."
+:::
+
+## The `list-style` Shorthand
+
+You can write the three marker properties in one line:
+
+```css
+/* list-style: type position image */
+ul {
+ list-style: square inside;
+}
+
+/* Remove everything */
+ul.plain {
+ list-style: none;
+}
+```
+
+Values can appear in any order, and you can leave some out.
+
+## Removing Bullets: The Right Way
+
+Menus, tag lists, and cards usually look wrong with bullets. To remove them, you need to reset **two** things: the marker and the default left indent.
+
+
+
+
+```css title="style.css"
+ul.plain {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+```
+
+```html title="index.html"
+
+ No bullets
+ No left indent
+
+```
+
+
+
+
+
+<>
+
+ No bullets
+ No left indent
+
+
+
+
+
+
+
+Many beginners write only `list-style: none` and wonder why the text still has a gap on the left. That gap is the list's `padding-inline-start` (about 40px). Reset it as well.
+
+:::warning Removing bullets can remove "list" for screen readers
+In some browser and screen reader combinations (notably Safari with VoiceOver), a list with `list-style: none` is no longer announced as a list. If the content really is a list, such as a navigation menu, add `role="list"` to the ``:
+
+```html
+
+```
+
+You will learn more about this in [Accessible Lists](./accessible-lists).
+:::
+
+## Horizontal Lists and Menus
+
+A navigation bar is just a list laid out in a row. The two classic tools are **Flexbox** and `inline`/`inline-block` items. Flexbox is the modern choice.
+
+
+
+
+```css title="style.css"
+.menu {
+ display: flex;
+ gap: 1.5rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+```
+
+```html title="index.html"
+
+
+
+```
+
+
+
+
+
+<>
+
+
+
+
+
+
+
+
+
+The HTML did not change at all. It is still a plain list of links, and screen readers still treat it that way. Only the layout changed.
+
+### A Wrapping "Tag" List
+
+With `flex-wrap`, items flow onto new lines when the space runs out. This suits tags and chips.
+
+
+
+
+```css title="style.css"
+.tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.tags li {
+ background: #e0e7ff;
+ color: #1e3a8a;
+ padding: 0.25rem 0.75rem;
+ border-radius: 999px;
+}
+```
+
+```html title="index.html"
+
+```
+
+
+
+
+
+<>
+
+ {["HTML", "CSS", "JavaScript", "Accessibility"].map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+
+## Spacing and Indentation
+
+| Goal | CSS |
+| :-- | :-- |
+| Change the indent | `padding-inline-start: 1.5rem;` |
+| Remove the indent | `padding-inline-start: 0;` |
+| Space between items | `li + li { margin-top: 0.5rem; }` or `gap` on a flex or grid list |
+| Space around the list | `margin-block: 1rem;` |
+| Tighter line height | `line-height: 1.4;` on `li` |
+
+
+
+
+```css title="style.css"
+.roomy li + li {
+ margin-top: 0.75rem;
+}
+```
+
+```html title="index.html"
+
+ Comfortable spacing
+ Between each item
+ Is easier to read
+
+```
+
+
+
+
+
+<>
+
+ Comfortable spacing
+ Between each item
+ Is easier to read
+
+
+
+
+
+
+
+Notice `padding-inline-start` rather than `padding-left`. Logical properties like this follow the page's writing direction, so they work correctly in right-to-left languages such as Arabic and Hebrew without extra CSS.
+
+## Lists in Other Writing Systems
+
+Not every reader counts with 1, 2, 3. CSS can show numbers in many scripts.
+
+| Value | Script | Looks like |
+| :-- | :-- | :-- |
+| `arabic-indic` | Arabic-Indic digits | ١، ٢، ٣ |
+| `devanagari` | Devanagari digits | १, २, ३ |
+| `bengali` | Bengali digits | ১, ২, ৩ |
+| `thai` | Thai digits | ๑, ๒, ๓ |
+| `cjk-ideographic` | Chinese/Japanese numerals | 一, 二, 三 |
+| `hiragana` | Japanese Hiragana letters | あ, い, う |
+
+
+
+
+```html title="index.html"
+
+ पहला चरण
+ दूसरा चरण
+ तीसरा चरण
+
+```
+
+
+
+
+
+<>
+
+ पहला चरण
+ दूसरा चरण
+ तीसरा चरण
+
+
+
+
+
+
+
+If a script you need is not on the list, the CSS `@counter-style` rule lets you define your own numbering system. That is an advanced topic, but it is good to know it exists.
+
+:::tip Match the page language
+Set `lang` on the page (or on the list, as above), and use the numbering your readers expect. Browsers pick better fonts and spacing when they know the language.
+:::
+
+## Putting It Together: A Styled Checklist
+
+
+
+
+```css title="style.css"
+.card-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ max-width: 24rem;
+}
+
+.card-list li {
+ padding: 0.75rem 1rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 8px;
+}
+
+.card-list li + li {
+ margin-top: 0.5rem;
+}
+```
+
+```html title="index.html"
+
+ Read the lesson
+ Try the example
+ Finish the practice
+
+```
+
+
+
+
+
+<>
+
+ {["Read the lesson", "Try the example", "Finish the practice"].map((text, index) => (
+
+ {text}
+
+ ))}
+
+
+
+
+
+
+
+## Quick Reference
+
+| Goal | Use |
+| :-- | :-- |
+| Change bullet shape | `list-style-type: square;` |
+| Change number style | `list-style-type: upper-roman;` |
+| Zero-padded numbers | `list-style-type: decimal-leading-zero;` |
+| Color the markers | `li::marker { color: ... }` |
+| Custom marker text | `li::marker { content: "✓ "; }` |
+| Remove bullets | `list-style: none; margin: 0; padding: 0;` |
+| Keep list meaning | add `role="list"` after removing bullets |
+| Horizontal list | `display: flex; gap: ...;` |
+| RTL-friendly indent | `padding-inline-start` |
+
+## Common Mistakes to Avoid
+
+1. **Removing bullets but not the padding.** Reset both `list-style` and `padding`.
+2. **Styling every `ul` on the page.** Use a class, so menus and footers are not affected by accident.
+3. **Using `display: inline` on ``** to make it horizontal. Put `display: flex` on the ``, or style the `` items.
+4. **Putting important words in CSS markers.** Screen readers may skip them.
+5. **Using `list-style: none` on a real list** without thinking about screen readers. Add `role="list"` when it matters.
+6. **Faking bullets with characters in the HTML** instead of using CSS. It breaks list semantics.
+7. **Using `padding-left` in multilingual sites.** Prefer `padding-inline-start`.
+8. **Changing the HTML to change the look.** Switching `` to `` just for numbers or bullets changes the meaning. Use CSS.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Make a bullet list with square markers, then hollow circles.
+2. Style a numbered list with `decimal-leading-zero`.
+3. Turn the markers blue with `li::marker`.
+4. Set a check mark as the marker using `content`.
+5. Compare `inside` and `outside` on an item long enough to wrap.
+6. Remove the bullets and the left indent from a list of links.
+7. Turn that list into a horizontal menu with Flexbox.
+8. Build a row of rounded "tags" that wrap on small screens.
+9. Add `role="list"` to a list whose bullets you removed.
+10. Bonus: show a three-step list with the numbering of another writing system.
+
+
+1. Which property changes the shape or numbering style of the marker?
+
+`list-style-type`, with values such as `square`, `circle`, `decimal-leading-zero`, and `upper-roman`.
+
+
+
+
+2. How do you change only the color of the bullets?
+
+Use the `::marker` pseudo-element, for example `li::marker { color: blue; }`.
+
+
+
+
+3. What two things should you reset to make a clean, bullet-free list?
+
+`list-style: none` removes the marker, and `padding` (or `padding-inline-start`) removes the left indent.
+
+
+
+
+4. How do you turn a list into a horizontal menu?
+
+Put `display: flex` (with a `gap`) on the ``. The HTML stays the same.
+
+
+
+
+5. Why might you add `role="list"` after removing bullets?
+
+Some browser and screen reader combinations stop announcing a list when `list-style: none` is applied. The role keeps its meaning.
+
+
+
+## Key Takeaways
+
+- CSS changes how a list **looks**. The HTML keeps its **meaning**.
+- `list-style-type`, `list-style-position`, and `list-style-image` control markers, and `::marker` styles them.
+- For clean menus, remove both the bullets and the default padding, and add `role="list"` when the list still matters.
+- Flexbox turns any list into a row, a wrap of tags, or a card stack.
+- Use logical properties and the right numbering system so lists work for readers everywhere.
+
+Your lists now look the way you want, and they should work for everyone too. The last lesson in this section covers just that: [Accessible Lists](./accessible-lists). You can also return to the [Lists overview](/tutorials/html/lists).
\ No newline at end of file
diff --git a/tutorials/html/06-lists/nested-lists.mdx b/tutorials/html/06-lists/nested-lists.mdx
index 6ca412a66..1ba502c38 100644
--- a/tutorials/html/06-lists/nested-lists.mdx
+++ b/tutorials/html/06-lists/nested-lists.mdx
@@ -1,16 +1,654 @@
---
-id: nested-lists
-title: "Creating Nested and Multi-Level Lists in HTML"
+id: html-nested-lists
+title: "HTML Nested Lists"
sidebar_label: "Nested Lists"
sidebar_position: 5
slug: /html/lists/nested-lists
-description: "Discover proper structural placement for nesting lists within li elements to build clean hierarchical outlines and multi-tier menus."
+description: "Learn how to nest HTML lists correctly. Put a ul or ol inside an li to build outlines, sub-menus, and multi-level steps. Covers mixing list types, default marker changes, the most common nesting mistake, multi-level numbering with CSS counters, accessibility, and best practices on CodeHarborHub."
keywords:
- HTML nested lists
- - multi-level list structure
- - sublists in HTML
- - nesting ul ol correctly
+ - nested ul
+ - nested ol
+ - HTML sub list
+ - HTML list inside list
+ - HTML outline list
+ - HTML multilevel numbering
+ - HTML sub-menu
+ - nested list mistakes
+ - learn HTML lists
- CodeHarborHub HTML
-authors: [ajay-dhangar]
-tags: [html, lists, nesting, structure]
----
\ No newline at end of file
+tags: [html, web-development, beginner, lists, nested, ul, ol, frontend]
+---
+
+Think about a book's table of contents. It lists chapters. Under each chapter, it lists sections. Under some sections, it lists subsections. The information has a **tree shape**: big groups hold smaller groups, which hold even smaller ones.
+
+A flat list cannot show that. For a tree, HTML lets you put **a list inside a list**. This is called a **nested list**, and it is how outlines, sub-menus, folder structures, and multi-level instructions are built. The idea is simple, but there is one rule that beginners get wrong again and again. This lesson makes sure you do not.
+
+` and ``, and how to mix them
+- How browsers change the markers on each level
+- Real-world patterns: outlines, sub-menus, and multi-level steps
+- How to number levels as 1, 1.1, 1.2 with CSS
+- Accessibility, depth limits, and common mistakes
+
+## The Golden Rule
+
+> **A nested list goes *inside* an ``, not beside it.**
+
+An inner list is not a separate sibling of the items. It **belongs to** one specific item, the one it describes. So you open an ` `, write the item's text, and then place the new list inside the same ` ` before closing it.
+
+
+
+
+```html title="index.html"
+
+ Fruits
+
+
+ Vegetables
+
+
+
+```
+
+
+
+
+
+<>
+
+
+ Fruits
+
+
+
+ Vegetables
+
+
+
+
+
+
+
+
+
+Read the structure like a family tree:
+
+- The outer `` has **two** items: "Fruits" and "Vegetables."
+- Each of those items **owns** an inner ``.
+- The inner list is a **child of its ``**, so it shows indented under its parent.
+
+### The Mistake to Avoid
+
+Putting the inner list directly inside the outer ``, as a neighbor of the `` items, is invalid.
+
+
+
+
+```html
+
+ Fruits
+
+ Vegetables
+
+```
+
+
+
+
+```html
+
+ Fruits
+
+
+ Vegetables
+
+```
+
+
+
+
+:::warning Why it matters even though it "works"
+Browsers usually still indent the invalid version, so it looks right. But the structure is wrong: the sub-list does not belong to any item. Screen readers may announce the levels incorrectly, CSS rules that target `li > ul` will not match, and validators will flag it. Fix the structure, not just the look.
+:::
+
+## Where Exactly Does the Inner List Go?
+
+The inner list can appear after the item's text, inside the same ` `. If you want to style or link the text, wrap it so the inner list stays separate:
+
+```html
+
+ HTML
+
+
+```
+
+Always write the item's own text **before** the nested list. The text names the group, and the list holds its members.
+
+## Nesting Ordered Lists
+
+You can nest `` inside ``. Each inner list restarts at 1 by default.
+
+
+
+
+```html title="index.html"
+Launch a website
+
+ Plan
+
+ Choose a goal.
+ Sketch the pages.
+
+
+ Build
+
+ Write the HTML.
+ Add the CSS.
+
+
+ Publish
+
+```
+
+
+
+
+
+<>
+Launch a website
+
+
+ Plan
+
+ Choose a goal.
+ Sketch the pages.
+
+
+
+ Build
+
+ Write the HTML.
+ Add the CSS.
+
+
+ Publish
+
+
+
+
+
+
+
+To tell the levels apart at a glance, give each level a different style with the `type` attribute (or CSS). Legal documents and outlines often use 1, a, i.
+
+
+
+
+```html title="index.html"
+
+ Setup
+
+ Install the editor.
+
+ Download it.
+ Run the installer.
+
+
+ Create a folder.
+
+
+
+```
+
+
+
+
+
+<>
+
+
+ Setup
+
+
+ Install the editor.
+
+ Download it.
+ Run the installer.
+
+
+
+ Create a folder.
+
+
+
+
+
+
+
+
+
+
+## Mixing List Types
+
+You can combine list types freely. The rule stays the same: the inner list goes inside an ``.
+
+| Outer | Inner | Good for |
+| :-- | :-- | :-- |
+| `` | `` | Steps that each have unordered notes or options |
+| `` | `` | Groups where one group has a sequence |
+| `` | `` | Categories that hold term-and-meaning pairs |
+| Any | Any | Whatever the content needs |
+
+
+
+
+```html title="index.html"
+Set up your project
+
+ Create a folder named my-site.
+ Add these files:
+
+ index.htmlstyle.cssscript.js
+
+ Open index.html in your browser.
+
+```
+
+
+
+
+
+<>
+Set up your project
+
+ Create a folder named my-site.
+
+ Add these files:
+
+ index.htmlstyle.cssscript.js
+
+ Open index.html in your browser.
+
+
+
+
+
+
+
+## How Browsers Change the Markers
+
+For nested **bullet** lists, browsers automatically use a different marker on each level, so you can see the depth.
+
+| Level | Default marker | CSS name |
+| :-- | :-- | :-- |
+| 1 (top) | Solid circle ● | `disc` |
+| 2 | Hollow circle ○ | `circle` |
+| 3 and deeper | Solid square ■ | `square` |
+
+
+
+
+```html title="index.html"
+
+```
+
+
+
+
+
+<>
+
+
+
+
+
+
+
+You can change these with CSS, which you will learn in [Styling Lists](./list-styling). Numbered lists do not change automatically, so use `type` or CSS to tell their levels apart.
+
+## Real-World Examples
+
+### 1. A Site Map or Course Outline
+
+
+
+
+```html title="index.html"
+HTML course outline
+
+ Text content
+
+ Headings
+ Paragraphs
+
+
+ Links and navigation
+
+ Anchor element
+ Navigation menus
+
+
+ Images
+
+```
+
+
+
+
+
+<>
+HTML course outline
+
+
+ Text content
+
+ Headings
+ Paragraphs
+
+
+
+ Links and navigation
+
+ Anchor element
+ Navigation menus
+
+
+ Images
+
+
+
+
+
+
+
+### 2. A Navigation Menu with a Sub-Menu
+
+Sub-menus and dropdowns are nested lists. The HTML below is the structure only. CSS (and sometimes JavaScript) turns it into a dropdown.
+
+```html
+
+
+
+```
+
+Even without any CSS, this still works as a clear, accessible outline of the site. That is the benefit of building structure first.
+
+### 3. A File and Folder Tree
+
+Folders contain files and other folders, which is a natural tree.
+
+
+
+
+```html title="index.html"
+
+ my-site/
+
+ index.html
+ css/
+
+
+ images/
+
+
+
+
+
+```
+
+
+
+
+
+<>
+
+
+ my-site/
+
+ index.html
+
+ css/
+
+
+
+ images/
+
+
+
+
+
+
+
+
+
+
+
+### 4. A Comment Thread
+
+Replies sit under the comment they answer.
+
+```html
+
+
+ Linh: Great lesson!
+
+
+
+```
+
+## Numbering Levels as 1, 1.1, 1.2
+
+Legal documents and technical specs often number sub-items as **1.1**, **1.2**, and **2.1**. HTML does not do this on its own, but a small CSS trick called **counters** does.
+
+```css title="style.css"
+ol.outline {
+ counter-reset: item;
+ list-style: none;
+ padding-left: 0;
+}
+
+ol.outline li {
+ counter-increment: item;
+}
+
+ol.outline li::before {
+ content: counters(item, ".") " ";
+ font-weight: 700;
+}
+
+ol.outline ol {
+ counter-reset: item;
+ list-style: none;
+ padding-left: 1.5rem;
+}
+```
+
+```html title="index.html"
+
+ Introduction
+
+ Purpose
+ Scope
+
+
+ Method
+
+```
+
+The result reads: **1** Introduction, **1.1** Purpose, **1.2** Scope, **2** Method. The `counters()` function joins the number of every level with a dot. You will learn more about counters in [Styling Lists](./list-styling).
+
+## How Deep Should You Go?
+
+You can nest as deeply as you like, but you should not.
+
+- **Two levels** is comfortable for almost everyone.
+- **Three levels** is the practical limit for most pages.
+- **Four or more** is a sign to rethink: break the content into separate sections with headings, or into several pages.
+
+Deep nesting is hard to read on a small phone screen, because each level pushes the text further to the right. It is also tiring for screen reader users, who hear every level announced.
+
+:::tip A simple test
+If you need to scroll sideways, or squint to see which list an item belongs to, the nesting is too deep. Flatten it with headings.
+:::
+
+## Accessibility at a Glance
+
+- Screen readers announce nesting, such as "list, 3 items, nested level 2," so people know where they are in the tree. **This only works when your structure is correct.** The inner list must be inside an ` `.
+- Keep the level count low. Every level is more to listen to.
+- Make each parent item a **clear label** for its children. "Fruits" works. "Other" does not.
+- Do not use nested lists just for indentation. Use CSS for spacing.
+- In navigation, a `` with a clear `aria-label` plus nested lists gives screen reader users a quick map of your site.
+
+## Common Mistakes to Avoid
+
+1. **Placing the inner list beside the ``**, directly inside `` or ``. It belongs inside the ``.
+2. **Closing the ` ` before the inner list.** Put the nested list **before** the closing ` `.
+3. **Mismatched or missing closing tags.** Deep trees make this easy. Indent your code consistently so each pair lines up.
+4. **Nesting too deep.** More than three levels is hard to read.
+5. **Using nesting for indentation only.** If it is not a real hierarchy, do not nest.
+6. **Typing manual numbers like "1.1" in the text.** Use counters, so numbers update by themselves.
+7. **Vague parent labels** such as "More" or "Other."
+8. **Forgetting that numbered levels look the same** unless you set `type` or CSS.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Write a bullet list of three food groups, each with two items inside.
+2. Write the same data as a numbered list, and set a different `type` for the inner level.
+3. Make a three-step ordered list where step 2 has a bullet list of options.
+4. Build a "My project" folder tree with at least three levels.
+5. Build a navigation menu with one item that has a sub-menu.
+6. Turn the invalid example from this page into a valid one.
+7. Use `type="a"` and `type="i"` to create a three-level outline.
+8. Add the counter CSS to get 1, 1.1, 1.2 numbering.
+9. Add a comment thread with one reply.
+10. Bonus: use your browser's developer tools to inspect the tree and confirm each inner `` sits inside an ``.
+
+
+1. Where must a nested list go?
+
+Inside an `` element, after that item's own text, and before the closing ` `. It must not sit directly inside the outer `
+
+
+2. Can you nest an ordered list inside an unordered list?
+
+Yes. You can mix ``, ``, and even ``, as long as each inner list sits inside an ` `.
+
+
+
+
+3. How do browsers mark the levels of a nested bullet list?
+
+By default they use a disc at the first level, a circle at the second, and a square at the third and deeper levels.
+
+
+
+
+4. How can you number levels as 1, 1.1, 1.2?
+
+With CSS counters: `counter-reset` and `counter-increment`, plus `counters(item, ".")` in a `::before` rule.
+
+
+
+
+5. How deep should a nested list be?
+
+Two levels is comfortable and three is usually the limit. Beyond that, split the content with headings or separate pages.
+
+
+
+## Key Takeaways
+
+- A nested list is a list inside an ` `. That is the golden rule.
+- You can nest ``, ``, and `` in any combination.
+- Browsers change bullet markers by level. Numbered levels need `type` or CSS to look different.
+- Outlines, sub-menus, file trees, and comment threads are all nested lists.
+- Keep nesting shallow, label parents clearly, and let CSS handle indentation and multi-level numbers.
+
+Your lists can now hold a whole hierarchy, but they still look plain. Next, learn how to change markers, spacing, and layout in [Styling Lists](./list-styling), or go back to the [Lists overview](/tutorials/html/lists).
\ No newline at end of file
diff --git a/tutorials/html/06-lists/ordered-lists.mdx b/tutorials/html/06-lists/ordered-lists.mdx
index fee643a61..6ba767f36 100644
--- a/tutorials/html/06-lists/ordered-lists.mdx
+++ b/tutorials/html/06-lists/ordered-lists.mdx
@@ -1,16 +1,542 @@
---
-id: ordered-lists
-title: "Building Ordered Lists with ol and li Tags"
-sidebar_label: "Ordered Lists ()"
+id: html-ordered-lists
+title: "HTML Ordered Lists"
+sidebar_label: "Ordered Lists"
sidebar_position: 3
slug: /html/lists/ordered-lists
-description: "Master numbered lists in HTML, customizing start values, reversed ordering, and list item numbering types with the ol element."
+description: "Learn how to create HTML ordered (numbered) lists with the ol and li elements. Master the start, reversed, and type attributes, the li value attribute, when order really matters, step-by-step instructions, rankings, accessibility, and common mistakes on CodeHarborHub."
keywords:
- HTML ordered list
- - ol tag attributes
- - numbered lists HTML
- - ol type and start attributes
+ - HTML ol tag
+ - HTML numbered list
+ - HTML ol start attribute
+ - HTML ol reversed attribute
+ - HTML ol type attribute
+ - HTML li value attribute
+ - ol vs ul
+ - HTML steps list
+ - learn HTML lists
- CodeHarborHub HTML
-authors: [ajay-dhangar]
-tags: [html, lists, ordered-list, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, lists, ol, li, frontend]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import AdsComponent from '@site/src/components/AdsComponent';
+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+Imagine following a recipe where the steps are shuffled: "Serve the cake. Crack the eggs. Bake for 30 minutes. Preheat the oven." You would end up with a mess. Some lists only make sense **in a particular order**, and HTML has a list made for exactly that: the **ordered list**.
+
+Ordered lists number their items automatically. If you add, move, or remove a step, the numbers fix themselves. In this lesson, you will learn how to create them, how to control where the numbering starts and which direction it goes, and when to choose a numbered list over a bullet list.
+
+` and `` work together
+- How to change the numbering with `start`, `reversed`, and `type`
+- How to set one item's number with `value`
+- Real-world patterns: instructions, rankings, and outlines
+- Accessibility and common mistakes
+
+## The Basics: `` and ``
+
+An ordered list uses the same ` ` item as a bullet list. Only the container changes.
+
+| Element | Name | Job |
+| :-- | :-- | :-- |
+| `` | **O**rdered **L**ist | The container, which numbers its items |
+| `` | **L**ist **I**tem | One item in the list |
+
+
+
+
+```html title="index.html"
+Make a cup of tea
+
+ Boil some water.
+ Put a tea bag in a cup.
+ Pour the water over the tea bag.
+ Wait three minutes.
+ Remove the tea bag and enjoy.
+
+```
+
+
+
+
+
+<>
+Make a cup of tea
+
+ Boil some water.
+ Put a tea bag in a cup.
+ Pour the water over the tea bag.
+ Wait three minutes.
+ Remove the tea bag and enjoy.
+
+
+
+
+
+
+
+You never type the numbers. The browser counts for you. Insert a new step in the middle and every number after it updates by itself, which is much safer than typing "1.", "2.", "3." by hand.
+
+:::info The shuffle test
+Shuffle the items. Does the meaning change? If yes, use ``. If no, use [``](./unordered-lists).
+:::
+
+## When to Use an Ordered List
+
+| Good use | Example |
+| :-- | :-- |
+| Step-by-step instructions | Install a tool, follow a recipe |
+| Rankings | Top 10 movies, leaderboard |
+| Sequences or timelines | Stages of a project |
+| Anything you refer to by number | "See step 3," legal clauses, instructions with references |
+| Countdowns | 5, 4, 3, 2, 1 |
+
+If you never refer to the position and the order is just a habit, a bullet list is probably better.
+
+## Changing the Numbers: Three Attributes
+
+`` has three attributes that control the numbering.
+
+| Attribute | What it does | Example |
+| :-- | :-- | :-- |
+| `start` | Begins counting from a number you choose | `` |
+| `reversed` | Counts **down** instead of up | `` |
+| `type` | Chooses the numbering style | `` |
+
+### 1. `start`: Begin at Another Number
+
+Sometimes a list continues from earlier, or starts at zero. Use `start` with a whole number.
+
+
+
+
+```html title="index.html"
+
+ Open the browser.
+ Go to the site.
+ Sign in.
+
+```
+
+
+
+
+
+<>
+
+ Open the browser.
+ Go to the site.
+ Sign in.
+
+
+
+
+
+
+
+This is handy when a text block or a figure interrupts a long set of steps and you need to continue the numbering afterward.
+
+:::note Always a number
+`start` takes a number, even when the list shows letters or Roman numerals. `` begins at **c**, the third letter.
+:::
+
+### 2. `reversed`: Count Down
+
+The `reversed` attribute is a **boolean attribute**: its presence turns it on. It is perfect for countdowns and "Top N" lists that build up to number one.
+
+
+
+
+```html title="index.html"
+Top 3 beginner languages
+
+ Python
+ JavaScript
+ HTML and CSS
+
+```
+
+
+
+
+
+<>
+Top 3 beginner languages
+
+ Python
+ JavaScript
+ HTML and CSS
+
+
+
+
+
+
+
+The items stay in the order you wrote them. Only the numbers change: they count 3, 2, 1. (The ranking here is just a sample.)
+
+### 3. `type`: Choose a Numbering Style
+
+| Value | Style | Looks like |
+| :-- | :-- | :-- |
+| `1` (default) | Decimal numbers | 1, 2, 3 |
+| `a` | Lowercase letters | a, b, c |
+| `A` | Uppercase letters | A, B, C |
+| `i` | Lowercase Roman numerals | i, ii, iii |
+| `I` | Uppercase Roman numerals | I, II, III |
+
+
+
+
+```html title="index.html"
+
+ Plan
+ Build
+ Launch
+
+
+
+ Plan
+ Build
+ Launch
+
+```
+
+
+
+
+
+<>
+
+ Plan
+ Build
+ Launch
+
+
+
+ Plan
+ Build
+ Launch
+
+
+
+
+
+
+
+:::tip `type` on `ol` is fine, but CSS is more flexible
+Unlike `type` on ``, the `type` attribute on `` is still valid in HTML. It is meant for cases where the numbering style is **part of the meaning**, such as legal clauses that must read "(a), (b), (c)" even if the CSS fails.
+
+For purely visual preferences, use CSS `list-style-type`, which offers many more styles (including `lower-greek`, `armenian`, `decimal-leading-zero`, and others). You will see them in [Styling Lists](./list-styling).
+:::
+
+### Combining the Attributes
+
+You can use them together. Here, a list counts down from 10, in Roman numerals.
+
+```html
+
+ Item X
+ Item IX
+ Item VIII
+
+```
+
+## Setting One Item's Number: `value`
+
+An individual `` inside an `` can have a `value` attribute. It sets that item's number, and the items after it continue from there.
+
+
+
+
+```html title="index.html"
+
+ Registration
+ Welcome talk
+ Closing ceremony
+ Photos
+
+```
+
+
+
+
+
+<>
+
+ Registration
+ Welcome talk
+ Closing ceremony
+ Photos
+
+
+
+
+
+
+
+"Closing ceremony" becomes **10**, and "Photos" becomes **11**. Use `value` sparingly. It is useful when an item must keep a fixed number (such as a numbered rule that others refer to), but most lists never need it.
+
+## Real-World Examples
+
+### 1. Instructions with More Than Text
+
+Each step can hold links, code, images, and notes.
+
+
+
+
+```html title="index.html"
+Run your first page
+
+ Create a file named index.html.
+
+ Add this line inside it:
+ <h1>Hello, world!</h1>
+ Save the file, then open it in your browser .
+ You should see a large "Hello, world!" heading.
+
+```
+
+
+
+
+
+<>
+Run your first page
+
+ Create a file named index.html.
+
+ Add this line inside it:
+ {"Hello, world! "}
+ Save the file, then open it in your browser .
+ You should see a large "Hello, world!" heading.
+
+
+
+
+
+
+
+### 2. A Ranking
+
+When position is the whole point, `` says it clearly.
+
+```html
+Weekly quiz leaderboard
+
+ Aisha: 98 points
+ Mateo: 95 points
+ Linh: 91 points
+
+```
+
+### 3. Breadcrumbs
+
+Breadcrumb trails show where a page sits in the site, from the top down. The order matters, so they are a good fit for ``.
+
+```html
+
+
+ Home HTML Lists
+
+
+```
+
+`aria-current="page"` tells assistive tech which item is the page you are on. With CSS, you can replace the numbers with arrows or slashes.
+
+### 4. Continuing a List After an Interruption
+
+Sometimes an explanation breaks up the steps. Rather than retyping numbers, use `start` for the second list.
+
+```html
+
+ Open the settings.
+ Choose "Language."
+
+
+The menu may look different on phones, but the options are the same.
+
+
+ Select your language.
+ Save your changes.
+
+```
+
+:::warning Two lists, or one?
+Splitting one logical set of steps into two `` elements can make a screen reader announce two separate lists. Do it only when a real break in content is needed. If you can, put the extra explanation **inside** the step's `` instead.
+:::
+
+## Ordered List or Unordered List?
+
+| Question | Use `` | Use `` |
+| :-- | :-- | :-- |
+| Does the sequence matter? | Yes | No |
+| Will anyone refer to "step 3"? | Yes | No |
+| Is it a ranking or timeline? | Yes | No |
+| Is it a group of equals? | No | Yes |
+| Is it ingredients, tags, or links? | No | Yes |
+
+A neat example: a recipe's **ingredients** are a `` (you can gather them in any order), but its **method** is an ``.
+
+
+
+
+```html title="index.html"
+Pancakes
+
+Ingredients
+
+ 1 cup flour
+ 1 egg
+ 1 cup milk
+
+
+Method
+
+ Whisk everything together.
+ Heat a pan.
+ Pour in a small circle of batter.
+ Flip when bubbles appear.
+
+```
+
+
+
+
+
+<>
+Pancakes
+
+Ingredients
+
+ 1 cup flour
+ 1 egg
+ 1 cup milk
+
+
+Method
+
+ Whisk everything together.
+ Heat a pan.
+ Pour in a small circle of batter.
+ Flip when bubbles appear.
+
+
+
+
+
+
+
+## Writing Good Steps
+
+1. **One action per step.** "Open the file and change the title and save" is three steps.
+2. **Start with a verb.** "Click," "Type," "Choose." Verbs translate well and are easy to follow.
+3. **Say what to expect.** "You should now see a green message" lets readers check their progress.
+4. **Keep the order honest.** Do not number items that do not need an order.
+5. **Warn before, not after.** Put a caution before the step where it matters.
+
+## Accessibility at a Glance
+
+- Screen readers announce an ordered list with its number of items and read each item's position ("1 of 5"), so people always know where they are in the sequence.
+- Use a real ``, **not** numbers typed into paragraphs. Typed numbers are just text.
+- Do not remove numbers (`list-style: none`) from a list where position matters, unless something else shows the order.
+- Lists in right-to-left languages such as Arabic and Hebrew place numbers on the right automatically, as long as the page `dir` is set correctly.
+- Different languages and regions also use different numeral systems. CSS `list-style-type` can display those, such as Arabic-Indic or Devanagari digits, for readers who expect them.
+
+## Common Mistakes to Avoid
+
+1. **Typing numbers by hand** (`1. Open `). You will get "1. 1. Open." Let the browser number.
+2. **Using `` when order is irrelevant.** It adds false meaning.
+3. **Using `` for steps.** Readers cannot refer to a step number, and screen readers do not announce the position.
+4. **Putting text or `` directly inside `
`.** Only `` is allowed.
+5. **Writing `start="three"`.** The value must be an integer, such as `start="3"`.
+6. **Splitting one sequence into several lists** without reason.
+7. **Putting more than one action in a step.** Break it up.
+8. **Using `value` everywhere.** It makes lists hard to maintain.
+
+## Practice Time
+
+Try these in your editor:
+
+1. Write a five-step ordered list for a task you know well, such as making coffee.
+2. Add a heading above it and a sentence at the end saying what the result should look like.
+3. Make a "Top 5" list that counts down using `reversed`.
+4. Make a list that starts at 6 using `start`.
+5. Change a list to use uppercase letters, then lowercase Roman numerals.
+6. Give one item a `value` and watch the items after it change.
+7. Put a `` snippet and a link inside one of your steps.
+8. Build a breadcrumb trail inside a ``, and mark the current page.
+9. Write a recipe with a bullet list of ingredients and a numbered method.
+10. Bonus: use CSS `list-style-type: decimal-leading-zero` to show 01, 02, 03.
+
+
+1. When should you use `` instead of `
+
+When the order of the items matters, such as steps, rankings, timelines, or anything you refer to by number.
+
+
+
+
+2. How do you start an ordered list at 5?
+
+Add `start="5"` to the ``.
+
+
+
+
+3. What does the `reversed` attribute do?
+
+It makes the list count down instead of up. It is a boolean attribute, so just writing `reversed` is enough.
+
+
+
+
+4. Which `type` value gives uppercase Roman numerals?
+
+`type="I"`. Other values are `1`, `a`, `A`, and `i`.
+
+
+
+
+5. What does `value` do on an ``?
+
+It sets that item's number, and the items after it continue counting from there.
+
+
+
+
+6. Why should you not type the numbers yourself?
+
+The browser numbers the items automatically. Typed numbers can double up and fall out of order when you edit the list, and screen readers will not know it is a list.
+
+
+
+## Key Takeaways
+
+- An ordered list is an `` with `` items. Use it when order matters.
+- The browser numbers the items for you. Never type the numbers by hand.
+- `start`, `reversed`, and `type` control where counting begins, its direction, and its style. `value` sets one item's number.
+- Recipes often need both: a `` for ingredients and an `` for the method.
+- Write one action per step, start with a verb, and keep lists as one list whenever possible.
+
+You can now build bullet lists and numbered lists. Next, learn a different kind: lists that pair a **term** with its **meaning** in [Description Lists](./description-lists), or return to the [Lists overview](/tutorials/html/lists).
\ No newline at end of file
diff --git a/tutorials/html/06-lists/unordered-lists.mdx b/tutorials/html/06-lists/unordered-lists.mdx
index 6daff2987..2391f7b04 100644
--- a/tutorials/html/06-lists/unordered-lists.mdx
+++ b/tutorials/html/06-lists/unordered-lists.mdx
@@ -1,16 +1,483 @@
---
-id: unordered-lists
-title: "Creating Unordered Lists with ul and li Tags"
-sidebar_label: "Unordered Lists ()"
+id: html-unordered-lists
+title: "HTML Unordered Lists"
+sidebar_label: "Unordered Lists"
sidebar_position: 2
slug: /html/lists/unordered-lists
-description: "Learn how to build bulleted lists using ul and li tags, adjust bullet styling, and structure unordered collections on web pages."
+description: "Learn how to create HTML unordered (bullet) lists with the ul and li elements. Understand when to use them, what can go inside list items, default styling, real-world examples like feature lists and menus, common mistakes, and best practices on CodeHarborHub."
keywords:
- HTML unordered list
- - ul tag HTML
- - li list item
- - bulleted lists HTML
+ - HTML ul tag
+ - HTML li tag
+ - HTML bullet list
+ - ul and li
+ - HTML list items
+ - HTML list-style-type
+ - HTML menu element
+ - ul vs ol
+ - learn HTML lists
- CodeHarborHub HTML
-authors: [ajay-dhangar]
-tags: [html, lists, unordered-list, beginner]
----
\ No newline at end of file
+tags: [html, web-development, beginner, lists, ul, li, frontend]
+---
+
+Packing for a trip, you might write: *passport, charger, umbrella, sunglasses.* It does not matter which one you pack first. They are just **a group of things that belong together**.
+
+In HTML, that kind of group is an **unordered list**. It is the list you will use most often: for features, ingredients, tags, links, requirements, and many other collections. In this lesson, you will learn how it works, what you can put inside it, and how to use it well.
+
+` and `` work together
+- What can (and cannot) go inside a list
+- What a list looks like by default
+- Real-world patterns: features, links, and menus
+- Common mistakes, and how to avoid them
+
+## The Basics: `` and ``
+
+An unordered list needs two elements:
+
+| Element | Name | Job |
+| :-- | :-- | :-- |
+| `` | **U**nordered **L**ist | The container for the whole list |
+| `` | **L**ist **I**tem | One item inside the list |
+
+
+
+
+```html title="index.html"
+Pack for the trip
+
+ Passport
+ Phone charger
+ Umbrella
+ Sunglasses
+
+```
+
+
+
+
+
+<>
+Pack for the trip
+
+ Passport
+ Phone charger
+ Umbrella
+ Sunglasses
+
+
+
+
+
+
+
+Each ` ` becomes a new line with a **bullet marker**. You do not type the bullets yourself. The browser adds them.
+
+:::info Why "unordered"?
+It means the order **does not change the meaning**. Swap "Passport" and "Umbrella," and the list says the same thing. If order does matter, you need an [ordered list](./ordered-lists).
+:::
+
+## Default Appearance
+
+Out of the box, browsers style an unordered list like this:
+
+- Each item starts on a **new line**.
+- Each item gets a **solid round bullet** (called a *disc*).
+- The list is **indented** on the left, usually about 40 pixels, to make room for the bullets.
+- The list has some **space above and below** it.
+
+This is only the default. With CSS, you can change the bullets, remove them, or lay the items out in a row. You will learn that in [Styling Lists](./list-styling). For now, here is a quick preview.
+
+
+
+
+```html title="index.html"
+
+ Square markers
+ Still the same list
+
+
+
+ No markers at all
+ Still the same list
+
+```
+
+
+
+
+
+<>
+
+ Square markers
+ Still the same list
+
+
+
+ No markers at all
+ Still the same list
+
+
+
+
+
+
+
+:::tip Appearance is CSS's job
+Older HTML used a `type` attribute on `` to pick bullet shapes. That is now obsolete. Use the CSS property `list-style-type` instead.
+:::
+
+## What Can Go Inside an ``?
+
+A list item can hold almost anything: plain text, links, images, bold text, even paragraphs and other lists.
+
+
+
+
+```html title="index.html"
+
+```
+
+
+
+
+
+<>
+
+
+
+
+
+
+
+### What Can Go Directly Inside ``?
+
+This is the part beginners often get wrong. The only elements allowed as **direct children** of `` are `` elements. (Script-supporting elements like `