HTML has five list types: <ol>, <ul>, <dl>, <menu>, and control lists via <select>/<datalist>, each with distinct semantic purposes.
Key Takeaways
Decision rule: use <select>+<option> for fixed user-input lists, <datalist>+<input> for suggested/autocomplete lists.
<optgroup> groups options visually and semantically; adding disabled to an <optgroup> blocks selection of the whole group.
An <hr> is valid inside a <select> for visual breaks without CSS; size attribute controls visible row count.
Avoid value attributes on <datalist><option> elements – users see the label but the value populates the input, causing confusion.
<datalist> works with type="range" and type="week" inputs, not just text; Chrome supports attr(label type(<percentage>)) for tick labels, Firefox requires manual pseudo-element workarounds.
Hacker News Comment Review
Commenters with years of front-end experience reported learning new patterns from this piece, suggesting these features are underused in production codebases.
Key practical caveat: <datalist> has broken behavior on mobile Safari, which is a large enough share of users to make it a risky default choice for forms.
