Lists
We can list information easily with ordered and un-ordered lists.
We begin by stating what kind of list it is using,
<ul> for un-ordered
<ol> for ordered
Then we define the items in that last by calling them a list item.
<li>list item</li>
Un-ordered lists
This is a bulleted list.
- item one
- item two
- item tree
We express this in HTML as
<ul>
<li>item one</li>
<li>item two</li>
<li>item tree</li>
</ul>
Ordered lists
This is a list with numbers.
- item one
- item two
- item tree
We express that in HTML as
<ol>
<li>item one</li>
<li>item two</li>
<li>item tree</li>
</ol>
Definition list
You may need to give more context to your paragraph that is defining key terms.
We use:
<dl> as the wrapper, for definition list.
<dt> for definition term. (A round and red fruit)
<dd> for the definition itself. (Apple)
Example of a definition list.
Banana
A yellow fruit with a bitter peel.
Dog
Man's best friend.
Expressed in HTML as.
<dl>
<dt>Banana</dt>
<dd>A yellow fruit with a bitter peel.</dd>
<dt>Dog</dt>
<dd>Man's best friend.</dd>
</dl>
Nested Lists
You can place list in lists to create multi topic listed items.
Tool rental list.
- John Doe
- Hammer
- Adjustable Wrench
- Measuring tape
- Jain Doe
- Jack Hammer
- Pipe Wrench
- 12ft Ladder
We can express that in HTML like this.
<ul>
<li>John Doe</li>
<ol>
<li>Hammer</li>
<li>Adjustable Wrench</li>
<li>Measuring Tape</li>
</ol>
<li>Jain Doe</li>
<ol>
<li>Jack Hammer</li>
<li>Pipe Wrench</li>
<li>12ft Ladder</li>
</ol>
</ul>