Five Kinds of HTML Lists You Probably Forgot Existed

A deep dive into HTML’s list elements argues that most developers only reach for <ul> and <ol> while ignoring three other valid collection patterns: description lists (<dl>), menus (<menu>), and control-based lists built from <select>/<option> or <input>/<datalist>. The piece reframes form controls as lists too, since navigation menus and dropdowns are both collections users interact with.

The decision tree is straightforward: use <select> when the choice set is fixed, <datalist> when suggestions are optional, <ol> when order carries meaning, <dl> for key-value pairs, <menu> for action controls, and <ul> as the default. Native semantics handle accessibility concerns like multi-select without ARIA scaffolding, and <optgroup>, <hr>, and the size attribute can structure long selects without CSS.

A notable gotcha: <option> inside a <datalist> treats the value attribute as what gets inserted into the input while the text becomes a label, producing confusing UX when the two differ. The author also notes <datalist> works with non-text inputs like type="week" and type="range" to suggest discrete stops along a continuous control.