Directory list and menu list (deprecated)

ul and ol are core HTML elements for creating lists, while the menu element was once considered an alternative but has since been deprecated. List structures are widely used on web pages for navigation, content grouping, or step-by-step displays, but there are differences in the semantics and usage of these elements.

Unordered Lists with ul

ul represents an unordered list, which is rendered with bullet points (like dots) by default. It is suitable for collections of items where order is not emphasized, such as navigation menus or feature lists. Each list item is wrapped in li:

<ul>
  <li>Home</li>
  <li>Products</li>
  <li>Contact Us</li>
</ul>

The bullet style can be modified with CSS:

ul {
  list-style-type: square; /* Square bullets */
}

Ordered Lists with ol

ol represents an ordered list, which uses numerical numbering by default. It is suitable for scenarios where order matters, such as step-by-step guides or rankings:

<ol>
  <li>Preheat oven to 180°C</li>
  <li>Mix flour and eggs</li>
  <li>Bake for 20 minutes</li>
</ol>

The numbering style can be changed with the type attribute:

<ol type="A">  <!-- Uppercase letter numbering -->
  <li>First item</li>
  <li>Second item</li>
</ol>

The Deprecated menu Element

The menu element was originally designed for interactive command menus, overlapping in functionality with ul and having ambiguous semantics. It was deprecated in HTML4, briefly redefined in HTML5 as a context menu, but ultimately not recommended due to compatibility issues. Legacy code might look like this:

<!-- Not recommended -->
<menu>
  <li>Save File</li>
  <li>Undo Action</li>
</menu>

Modern development should use ul with ARIA roles instead:

<ul role="menu">
  <li role="menuitem">Save File</li>
  <li role="menuitem">Undo Action</li>
</ul>

Complex Structures with Nested Lists

Lists can be nested to create complex structures, such as a table of contents:

<ul>
  <li>Chapter 1
    <ul>
      <li>Section 1.1
        <ol>
          <li>Concept Introduction</li>
          <li>Basic Syntax</li>
        </ol>
      </li>
    </ul>
  </li>
</ul>

Advanced Styling for Lists

CSS allows deep customization of list styles. The following example creates a custom-numbered table of contents:

<style>
  .toc {
    counter-reset: section;
    list-style: none;
  }
  .toc li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }
</style>

<ul class="toc">
  <li>HTML Basics
    <ul>
      <li>Element Syntax</li>
    </ul>
  </li>
</ul>

Semantic Use of Lists

Screen readers rely on proper list structures. Bad example:

<!-- Anti-pattern: Simulating a list with divs -->
<div>
  <span>1. Item One</span><br>
  <span>2. Item Two</span>
</div>

Always use native list elements for accessibility. For navigation menus, the recommended pattern is:

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Historical Context of Deprecated Elements

The menu element was deprecated for several reasons:

• Overlapping functionality with ul
• Inconsistent browser implementations
• Lack of clear semantic use cases
• Interactive menus are better implemented as custom components

Existing code containing menu should be gradually migrated. During migration, the old element can be retained as a fallback:

<menu class="legacy-menu">
  <!-- Legacy content -->
</menu>

<script>
  document.querySelectorAll('menu').forEach(menu => {
    const ul = document.createElement('ul');
    ul.innerHTML = menu.innerHTML;
    ul.setAttribute('role', 'menu');
    menu.replaceWith(ul);
  });
</script>