Web Development - HTML Lists
HTML Lists
Lists are used to group related items together. HTML supports three main types of lists: unordered lists, ordered lists, and description lists.
Unordered Lists
An unordered list starts with the <ul> tag.
Each item inside the list is placed between <li> and </li> tags.
By default, items appear with bullet points.
Ordered Lists
An ordered list starts with the <ol> tag.
List items are automatically numbered.
Example
Ordered list:
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol>
Try it Yourself »
By default, numbers are shown. You can also change the numbering type (1, A, a, I, i) using the type attribute.
Example
Different numbering styles:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ol>
Try it Yourself »
Nested Lists
You can place lists inside other lists to create sub-items.
Example
Nested list:
<ul>
<li>Frontend</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<li>Backend</li>
</ul>
Try it Yourself »
Nested lists are great for showing categories or hierarchies of information.
Description Lists
A description list is used for terms and their descriptions.
It uses the <dl> (description list) element, with <dt> (term) and <dd> (definition) inside.
Example
Description list:
<dl>
<dt>HTML</dt>
<dd>Defines the structure of a web page.</dd>
<dt>CSS</dt>
<dd>Styles the layout and design.</dd>
<dt>JavaScript</dt>
<dd>Adds interactivity to web pages.</dd>
</dl>
Try it Yourself »
Combining List Types
You can mix different types of lists on the same page to organize content clearly.
Example
Mixing list types:
<h3>Web Development Steps</h3>
<ol>
<li>Plan the project</li>
<li>Design the layout</li>
<li>Build the site</li>
<ul>
<li>HTML structure</li>
<li>CSS styling</li>
<li>JavaScript behavior</li>
</ul>
</ol>
Try it Yourself »
Best Practices
- Use unordered lists for items with no particular order.
- Use ordered lists when sequence matters.
- Use description lists for terms and definitions.
- Keep lists short and meaningful for readability.
Tip: Lists are great for navigation menus, steps, and feature descriptions - you'll use them a lot!
Summary
<ul>- unordered list (bullets)<ol>- ordered list (numbers)<li>- list item<dl>- description list<dt>- term,<dd>- description
Next, you will learn about HTML Tables - displaying data in rows and columns.
