HTML Lists
HTML Lists
An ordered list:
| An unordered list:
|
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
- Coffee
- Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
- Coffee
- Milk
HTML Description Lists
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
- Coffee
- - black hot drink
- Milk
- - white cold drink
Basic Notes - Useful Tips
Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.
More Examples
Different types of ordered lists
Demonstrates different types of ordered lists.
Different types of unordered lists
Demonstrates different types of unordered lists.
Nested list
Demonstrates how you can nest lists.
Nested list 2
Demonstrates a more complicated nested list.
Description list
Demonstrates a definition list.
HTML List Tags
| Tag | Description |
|---|---|
| <ol> | Defines an ordered list |
| <ul> | Defines an unordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <dd> | Defines a description of a term/name in a description list |
Posting Komentar untuk "HTML Lists"