HTML Tutorial
HTML Lists
ol, ul, and dl group items. Nested lists make outlines, menus, and step-by-step instructions.
Three kinds of list
HTML has unordered lists, ordered lists, and description lists. Pick the one that matches the relationship between items, not the bullets you happen to like. CSS can change the markers later.
| List | Tags | Use when |
|---|---|---|
| Unordered | ul + li | Order does not matter |
| Ordered | ol + li | Sequence, rank, or steps |
| Description | dl + dt + dd | Terms and their meanings |
Unordered and ordered lists
Each item is an <li>. Wrap the items in <ul> for a set, or<ol> for a sequence. Do not put text directly in the ul orol; only list items (and nested lists inside those items) belong there.
Example
<h2>Pack for the lab</h2>
<ul>
<li>Notebook</li>
<li>Safety glasses</li>
<li>USB drive</li>
</ul>
<h2>Run the experiment</h2>
<ol>
<li>Calibrate the scale.</li>
<li>Measure 50 ml of water.</li>
<li>Record the mass.</li>
</ol>Screen readers announce “list, three items” and the type. That only works if you use a real list, not a pile of paragraphs with dashes typed by hand.
type and start on ordered lists
type changes the marker: 1 for numbers (default), a orA for letters, i or I for roman numerals. start sets the first number when you continue a sequence, such as a procedure that spans two sections.
Example
<p>Parts of the report</p>
<ol type="A">
<li>Method</li>
<li>Results</li>
<li>Discussion</li>
</ol>
<p>Continue numbering from the previous page</p>
<ol start="4">
<li>Rinse the flask.</li>
<li>Put the glassware on the rack.</li>
</ol>Unordered lists also accept type in old HTML (disc, circle,square). Prefer CSS list-style-type for styling. Keep type andstart on ol when the marker carries meaning, such as a legal outline.
Nested lists
A nested list goes inside an <li>, not beside it. The inner ul orol is part of that item. That is how outlines, menus with submenus, and multi-level instructions are built.
Example
<h2>Lab outline</h2>
<ol>
<li>
Prepare the bench
<ul>
<li>Clear the scale</li>
<li>Label two flasks</li>
</ul>
</li>
<li>
Take measurements
<ol>
<li>Empty flask</li>
<li>Flask plus water</li>
</ol>
</li>
<li>Write the totals in the notebook</li>
</ol>Indent in the source so you can see the nesting. The browser does not care about your spaces; the matching tags do. Close the inner list before you close the outer li.
Description lists: dl, dt, dd
A description list pairs names with explanations. <dt> is the term.<dd> is the description. You can have several terms for one description, or several descriptions for one term.
Example
<h2>Markup glossary</h2>
<dl>
<dt>ul</dt>
<dd>An unordered list. Items are peers, not steps.</dd>
<dt>ol</dt>
<dd>An ordered list. Items have a sequence.</dd>
<dt>li</dt>
<dd>A list item. Lives inside ul or ol.</dd>
<dt>dl</dt>
<dd>A description list of terms and definitions.</dd>
</dl>Use a description list for glossaries, metadata (Author / Date), and FAQ-style term then answer. Do not use it as a substitute for a two-column table of numbers.
Choose the right structure
- Shopping bag, tags, or a set of links:
ul. - Recipe steps, ranked results, or a numbered procedure:
ol. - Word and meaning, label and value:
dl. - Rows of comparable numbers: a table, not a list.
Do not fake a list with <br> and hyphen characters. You lose numbering, nesting, and the list announcement. If it is a list, mark it as a list.
Nesting, markers, and description lists are all still HTML structure. Appearance — spacing, custom bullets, horizontal menus — is CSS on top of that structure.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Chemistry
A procedure in order
ol is ordered: the sequence matters. A titration method is ol. ul is a bag of items with no required order. dl is term then definition.
Nested lists are outlines. Do not fake a list with br and a hyphen. Markers and numbering come from the tag.
Example
<h1>Titration</h1>
<ol>
<li>Rinse the burette with NaOH.</li>
<li>Pipette 25.0 mL of HCl.</li>
<li>Add indicator. Titrate to faint pink.</li>
</ol>Biology
A glossary of vitals
dl pairs dt (the term) with dd (the meaning). Pulse and temperature belong together as named facts, not as two random paragraphs.
Example
<dl>
<dt>Resting pulse</dt>
<dd>72 bpm (18 beats in 15 s × 4)</dd>
<dt>Oral temperature</dt>
<dd>36.8 °C</dd>
</dl>