Developer Frank M Taylor published a detailed blog post titled 'You don’t know HTML Lists,' challenging common assumptions about HTML lists. The post, part of the 'You don’t know HTML' series, reveals five distinct types of HTML lists—ordered, unordered, description, menu, and control—and provides guidelines for their correct usage in web development. Taylor argues that most developers rely only on ordered and unordered lists, missing out on semantic and functional benefits of other list types 1.
Taylor’s post targets developers with real-world HTML experience, skipping introductory explanations found on platforms like MDN and W3Schools. He emphasizes that HTML lists extend beyond the commonly used ordered (`<ol>`) and unordered (`<ul>`) lists. The post introduces three additional list types: description lists (`<dl>`), menu lists (`<menu>`), and control lists, which include `<select>` and `<option>` or `<input>` and `<datalist>` combinations. Taylor notes that many developers are unaware of these variations, leading to misuse or underutilization of HTML’s semantic capabilities 1.
The blog post provides a clear decision-making framework for choosing the appropriate list type. For lists where item order affects meaning, Taylor recommends using ordered lists (`<ol>`). For key-value pairs, he suggests description lists (`<dl>`). If the list consists of interactive controls, such as buttons or links, menu lists (`<menu>`) are the correct choice. For user input fields where data is collected, Taylor advises using `<select>` and `<option>` for fixed choices or `<input>` and `<datalist>` for dynamic suggestions. Unordered lists (`<ul>`) are positioned as the default choice for simple, non-hierarchical collections 1.
Taylor dedicates a section to control lists, which are often overlooked in discussions about HTML lists. He explains that `<select>` and `<option>` elements are ideal for fixed-choice inputs, such as language selection dropdowns. For example, a `<select>` element with multiple attributes allows users to choose more than one option, displaying all choices simultaneously. Taylor highlights the `<optgroup>` element, which groups related options under a labeled category, such as language families. This approach improves usability and accessibility without requiring additional ARIA attributes 1.
The post includes practical code examples to illustrate the use of each list type. For instance, Taylor demonstrates how to create a multilingual selection dropdown using `<select>` and `<option>` with the `multiple` attribute. He also shows how to group languages by family using `<optgroup>`, such as categorizing English under 'Germanic' and French under 'Romance.' These examples underscore the importance of semantic HTML in creating accessible and user-friendly interfaces 1.
Taylor critiques the common over-reliance on unordered lists (`<ul>`) for all types of collections, arguing that this practice ignores the semantic richness of HTML. He points out that using the wrong list type can lead to accessibility issues, as screen readers and other assistive technologies rely on correct semantic markup to interpret content. For example, a menu list (`<menu>`) is specifically designed for interactive controls, while a description list (`<dl>`) is optimized for key-value pairs, such as glossaries or metadata 1.
The blog post also addresses the role of ARIA attributes in enhancing accessibility. Taylor notes that native HTML elements like `<select>` and `<option>` inherently include accessibility features, such as `aria-multiselectable`, which do not need to be manually added. This reduces the need for additional markup and simplifies development while ensuring compliance with accessibility standards. He emphasizes that leveraging native browser semantics can improve both developer efficiency and user experience 1.
Taylor’s post is the second installment in his 'You don’t know HTML' series, which aims to explore lesser-known aspects of HTML. The series is designed for developers who already have a foundational understanding of the language but seek to deepen their knowledge. By focusing on practical, real-world applications, Taylor provides actionable insights that developers can immediately apply to their projects, improving both code quality and user experience 1.