Detailed explanation
HTML provides three list elements because not every collection of information has the same meaning. Use <ul> for an unordered list, where changing the order does not change the essential meaning, such as a collection of available features. Use <ol> for an ordered list, where sequence or rank matters, such as installation steps or competition results. Use <dl> for a description list, which expresses associations between names or terms and their descriptions or values. The choice should reflect the content’s meaning rather than its desired appearance.
Both <ul> and <ol> contain list items marked with <li>. Browsers normally display unordered items with bullets and ordered items with numbers, but these are default presentation styles, not the defining difference. For example, <ol><li>Preheat oven</li><li>Mix ingredients</li></ol> communicates a sequence even if CSS hides its markers. An ordered list can use start to set its initial number, reversed to count backwards, and a value attribute on an individual <li> to change that item’s number. CSS properties such as list-style-type control marker appearance without replacing the need for appropriate HTML semantics.
A <dl> uses <dt> for a term or name and <dd> for its associated description or value; it does not use <li> for those entries. For example, <dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl> defines an abbreviation. Description lists also suit metadata such as a product’s brand, model, and warranty. They are not restricted to exactly one term followed by exactly one description: a group may contain multiple terms sharing descriptions, or one term with multiple descriptions. However, a description list is not a general replacement for a table containing row-and-column relationships.
In interviews, explain the semantic distinction first, then show the child elements and a practical example. Correct markup gives browsers and assistive technologies meaningful structure, although announcements vary across browser and screen-reader combinations. Lists can also be nested: place a nested <ul> or <ol> inside the relevant <li>. This preserves the parent-child relationship instead of relying only on indentation to suggest hierarchy.
Key points to remember
- <ul> represents items whose sequence is not essential; its items use <li>.
- <ol> represents a meaningful sequence or ranking; its items also use <li>.
- <dl> associates <dt> terms or names with <dd> descriptions or values.
- Bullets and numbers are presentation defaults; choose list elements by meaning.
- Nest a subordinate <ul> or <ol> inside its parent <li>.
Common mistakes candidates make
- Choosing <ul> or <ol> only for its visual markers rather than whether order matters.
- Using <li> for description-list entries instead of <dt> and <dd>.
- Creating fake lists with typed bullets, numbers, and <br> elements instead of semantic list markup.
Likely follow-up questions
Can an unordered list display numbers through CSS?
Yes, list-style-type: decimal can give a <ul> numeric markers. This changes its appearance, not its HTML meaning; use <ol> when order matters.
How do you start an ordered list at 5?
Use <ol start="5"> to begin numbering at 5. You can also set value="5" on a particular <li> to change numbering from that item.
Can one term have multiple descriptions in a description list?
Yes, a <dt> can be followed by multiple <dd> elements within the same group. Multiple consecutive <dt> elements can also share the descriptions that follow them.
Interview tip: Start with “unordered items, meaningful sequence, and term-description associations,” then illustrate each with a short example.