Nested lists in HTML - Performance & Optimization

Performance: Nested lists

MEDIUM IMPACT

Nested lists affect the DOM size and complexity, impacting rendering speed and layout calculations.

Creating a multi-level menu with nested lists

HTML

<nav aria-label="Main menu">
  <ul>
    <li><button aria-expanded="false" aria-controls="submenu1">Item 1</button>
      <ul id="submenu1" hidden>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
    <li>Item 2</li>
  </ul>
</nav>

Limits nesting depth and uses ARIA for accessibility; hides submenus to reduce initial layout cost.

📈 Performance GainReduces initial DOM nodes and layout complexity; fewer reflows on page load.

Creating a multi-level menu with nested lists

HTML

<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1
        <ul>
          <li>Subsubitem 1</li>
          <li>Subsubitem 2</li>
        </ul>
      </li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

Excessive nesting creates many DOM nodes and deep tree structure, causing slower layout and paint.

📉 Performance CostTriggers multiple reflows during layout; deep tree increases style calculation time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Deeply nested lists	High number of nodes and deep tree	Multiple reflows triggered during layout	High paint cost due to many elements	[X] Bad
Shallow lists with hidden submenus	Fewer nodes initially, hidden elements reduce layout	Single reflow on load	Lower paint cost	[OK] Good

Rendering Pipeline

Nested lists increase the number of DOM nodes and depth, affecting style calculation, layout, and paint stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive due to recalculating positions for many nested elements.

Core Web Vital Affected

LCP

Nested lists affect the DOM size and complexity, impacting rendering speed and layout calculations.

Optimization Tips

1Keep list nesting shallow to reduce DOM complexity.

2Hide nested lists initially to avoid costly layout on page load.

3Use semantic HTML and ARIA for accessibility without deep nesting.

Performance Quiz - 3 Questions

How does deeply nested lists affect page load performance?

A They increase DOM size and cause longer layout times

B They reduce the number of DOM nodes

C They improve paint speed

D They have no impact on rendering

DevTools: Performance

How to check: Record a performance profile while loading the page with nested lists; look for long layout and paint times.

What to look for: High layout duration and many style recalculations indicate costly nested list rendering.

Practice

1. What is the main purpose of using nested lists in HTML?

easy

A. To organize information into groups and subgroups

B. To add images inside list items

C. To change the font style of list items

D. To create buttons inside lists

Solution

1. Step 1: Understand the role of nested lists

   Nested lists allow placing one list inside another to show hierarchy or subgroups.

2. Step 2: Identify the correct purpose

   Organizing information into groups and subgroups matches the use of nested lists.

3. Final Answer:

   To organize information into groups and subgroups -> Option A

4. Quick Check:

   Nested lists = groups and subgroups [OK]

Hint: Nested lists group items inside other lists [OK]

Common Mistakes:

• Thinking nested lists add images
• Confusing nested lists with styling
• Believing nested lists create buttons

2. Which of the following is the correct syntax to start a nested unordered list inside a list item?

easy

A. <li><ul>

B. <ul><li>

C. <ol><ul>

D. <li><ol>

Solution

1. Step 1: Recall nested list structure

   A nested list must be inside a list item, so
2. comes first.

3. Step 2: Identify correct tag order

   Starting a nested unordered list inside a list item uses <li><ul>.

4. Final Answer:

   <li><ul> -> Option A

5. Quick Check:

   Nested list starts inside <li> [OK]

Hint: Nested list always starts inside a list item <li> [OK]

Common Mistakes:

• Starting nested list outside <li>
• Mixing <ul> and <ol> incorrectly
• Placing <li> before <ul> in wrong order

3. What will be the visual result of this HTML code?

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

medium

A. A numbered list with 'Fruit' and 'Vegetables' only

B. A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item

C. A bulleted list with 'Fruit', 'Apple', 'Banana', and 'Vegetables' all at the same level

D. An error because nested lists are not allowed inside list items

Solution

1. Step 1: Analyze the list tags

   The outer list is unordered (<ul>), so bullets appear. 'Fruit' has a nested <ul> with 'Apple' and 'Banana'.

2. Step 2: Understand nesting effect

   'Apple' and 'Banana' appear as a sub-bulleted list under 'Fruit'. 'Vegetables' is a separate top-level bullet.

3. Final Answer:

   A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item -> Option B

4. Quick Check:

   Nested <ul> creates sub-bullets [OK]

Hint: Nested <ul> creates sub-bullets under parent item [OK]

Common Mistakes:

• Thinking nested items appear at same level
• Confusing bullets with numbers
• Believing nested lists cause errors

4. Identify the error in this nested list HTML code:

<ul>
  <li>Item 1</li>
  <ul>
    <li>Subitem 1</li>
  </ul>
  <li>Item 2</li>
</ul>

medium

A. There should be no nested lists inside <ul>

B. The <li> tags are missing closing tags

C. The nested <ul> is not inside a <li> element

D. The outer <ul> should be an <ol>

Solution

1. Step 1: Check nested list placement

   The nested <ul> appears directly inside the outer <ul>, not inside any <li>.

2. Step 2: Understand correct nesting rules

   A nested list must be inside a list item (<li>), so this structure is invalid.

3. Final Answer:

   The nested <ul> is not inside a <li> element -> Option C

4. Quick Check:

   Nested list must be inside <li> [OK]

Hint: Nested lists must be inside a list item <li> [OK]

Common Mistakes:

• Placing nested <ul> directly inside <ul>
• Forgetting to close <li> tags
• Thinking <ul> and <ol> are interchangeable here

5. You want to create a nested list where the top level is numbered and the nested level is bulleted. Which HTML structure correctly achieves this?

hard

A. <ul>\n <li>Main Item</li>\n <ul>\n <li>Sub Item</li>\n <ul>\n</ul>

B. <ul>\n <li>Main Item\n <ol>\n <li>Sub Item</li>\n </ol>\n </li>\n</ul>

C. <ol>\n <li>Main Item</li>\n <ol>\n <li>Sub Item</li>\n </ol>\n</ol>

D. <ol>\n <li>Main Item\n <ul>\n <li>Sub Item</li>\n </ul>\n </li>\n</ol>

Solution

1. Step 1: Identify top-level list type

   The top level should be numbered, so use <ol> for the main list.

2. Step 2: Identify nested list type

   The nested list should be bulleted, so use <ul> inside a <li> of the <ol>.

3. Step 3: Check correct nesting

   The nested <ul> is correctly placed inside a <li> of the <ol>.

4. Final Answer:

   <ol> with nested <ul> inside <li> -> Option D

5. Quick Check:

   Numbered <ol> with bulleted <ul> nested inside [OK]

Hint: Use <ol> for numbers, <ul> inside <li> for bullets [OK]

Common Mistakes:

• Placing nested list outside <li>
• Using same list type for both levels
• Incorrectly closing tags