Learning HTML - Lists, Tables, and Structured Content
This episode breaks down structured content: unordered lists, ordered lists, description lists, and tables with thead, tbody, th, and the scope attribute for readable data.
#Introduction
Not all content comes in paragraph form. Step lists, price menus, and columnar data are an important part of many pages. Episode 4 covers lists, tables, and structured content — how to organize repetitive and columnar information with the right markup.
Beyond being visually useful, correctly written lists and tables provide semantic structure: screen readers can announce item counts, and search engines understand relationships between data. This is important groundwork before we move into advanced semantics in episode 7.
#Unordered Lists
#ul and li
The ul element (unordered list) marks lists where order doesn't matter — for example a feature or category list. Each item is wrapped in li (list item):
<ul>
<li>Semantik HTML</li>
<li>Aksesibilitas</li>
<li>Integrasi CSS dan JavaScript</li>
</ul>Browsers show bullets by default. Key point: li can only be a direct child of ul, ol, or menu.
#Ordered Lists
#ol, type, and start
The ol element (ordered list) marks lists where order matters — steps, instructions, rankings. The browser numbers them automatically.
<ol>
<li>Buka file index.html</li>
<li>Tulis struktur dasar dokumen</li>
<li>Simpan dan muat ulang browser</li>
</ol>The start attribute sets the starting number, and type changes the numbering style like A, a, or i:
<ol start="5" type="A">
<li>Item kelima</li>
<li>Item keenam</li>
</ol>Ordered lists can nest inside li to create sub-steps — screen readers and browsers handle the indentation automatically.
#Description Lists
#dl, dt, and dd
For term-and-definition pairs, use dl (description list) with dt for the term and dd for the definition:
<dl>
<dt>HTML</dt>
<dd>Bahasa markup untuk menyusun konten web.</dd>
<dt>CSS</dt>
<dd>Bahasa untuk mengatur tampilan dan layout.</dd>
</dl>Use dl for glossaries, metadata, or label-value pairs — not a forced ul with span pairs.
#Tables for Data
#Table, tr, th, and td
Tables mark two-dimensional data — rows and columns. The basic skeleton:
<table>
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Peran</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arman</td>
<td>Cloud Engineer</td>
</tr>
<tr>
<td>Sinta</td>
<td>Frontend Developer</td>
</tr>
</tbody>
</table>Important parts:
theadholds the column header rows.tbodyholds the main data rows.thmarks header cells;tdmarks data cells.scope="col"explains that thethgoverns a column — crucial for screen readers.
Remember the golden rule: never use tables for page layout — tables are only for data. Layout is CSS's job, which we'll discuss in episode 13.
#Exercise: A Menu and Data Page
Combine lists and tables in one page:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kafe Kopi Nusantara</title>
</head>
<body>
<h1>Menu Kafe Kopi Nusantara</h1>
<h2>Minuman Populer</h2>
<ul>
<li>Kopi Tubruk</li>
<li>Kopi Susu Gula Aren</li>
<li>Teh Tarik</li>
</ul>
<h2>Harga</h2>
<table>
<thead>
<tr>
<th scope="col">Minuman</th>
<th scope="col">Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kopi Tubruk</td>
<td>Rp18.000</td>
</tr>
<tr>
<td>Kopi Susu Gula Aren</td>
<td>Rp22.000</td>
</tr>
</tbody>
</table>
</body>
</html>Save it as index.html and open it in the browser. You can also check it through the local server with python3 -m http.server 8080 and then opening http://localhost:8080.
#Common Mistakes and Solutions
#Using Tables for Layout
Laying out a page with tables produces code that's hard to maintain and bad for responsiveness. Use CSS for layout; tables only for columnar data.
#li Outside a List
Writing li items directly in body without a ul or ol wrapper makes the document invalid. Always wrap lists with the right parent element.
#Closing
Episode 4 equips you with content structure: ul and ol for lists, dl for definitions, and table with thead, tbody, th, and scope for data. This structured content will be easy to read for humans, machines, and assistive tools.
Key takeaways:
ulfor lists without important order;olfor ordered lists.- Every list item is written with
li. dl,dt, andddfor term-and-definition pairs.- Tables are only for data; use
thwithscopeso they're accessible. - Never use tables for page layout.
In the next episode, episode 5, we'll cover link and navigation elements — a, the href, target, and rel attributes, plus in-page anchors. You'll start connecting pages to each other, forming the real web.