Lesson 4 of 8
Lists & Tables
You'll learn how to mark up ordered and unordered , and how to build tables for tabular data. Tables are for data only, not for page layout.
<!-- Unordered list (bullet points) -->
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Ordered list (numbered) -->
<ol>
<li>Preheat oven to 350°F</li>
<li>Mix ingredients</li>
<li>Bake for 30 minutes</li>
</ol>
<!-- Nested lists -->
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Python</li>
<li>Go</li>
<li>Rust</li>
</ul>
</li>
</ul>
<!-- Description list — term and definition pairs -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of web pages</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the appearance of web pages</dd>
</dl><!-- Table — for tabular data only -->
<table>
<caption>Programming Language Popularity</caption>
<!-- Table head -->
<thead>
<tr>
<th scope="col">Language</th>
<th scope="col">Year Created</th>
<th scope="col">Paradigm</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<tr>
<td>Python</td>
<td>1991</td>
<td>Multi-paradigm</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1995</td>
<td>Multi-paradigm</td>
</tr>
<tr>
<td>Rust</td>
<td>2010</td>
<td>Systems</td>
</tr>
</tbody>
<!-- Table foot (optional — good for totals/summaries) -->
<tfoot>
<tr>
<td colspan="3">Source: Various</td>
</tr>
</tfoot>
</table>Finished reading?Mark it done to track your progress.
Tip: use the ← and → keys to move between lessons.