html list
DESCRIPTION
LeanIT.am has a complete online reference and example section that will give you more detailed information and also working samples.TRANSCRIPT
![Page 1: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/1.jpg)
<HTML> Lists
![Page 2: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/2.jpg)
Have you ever
created a
top 10 list?
<HTML> Lists
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
![Page 3: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/3.jpg)
Or wanted to
itemize
something?
<HTML> Lists
• Apples
• Oranges
• Bananas
![Page 4: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/4.jpg)
This is done
with 3 types of
HTML list tags
<HTML> Lists
• Unordered List
• Ordered List
• Definition List
![Page 5: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/5.jpg)
Lets look first at Unordered List
<HTML> Lists
• Apples
• Oranges
• Bananas
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
![Page 6: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/6.jpg)
Lets look first at Unordered List
<HTML>
Lists
• Apples
• Oranges
• Bananas
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Unordered list is created using the <ul> tag
![Page 7: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/7.jpg)
Lets look first at Unordered List
<HTML>
Lists
• Apples
• Oranges
• Bananas
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Then each item uses the <li> tag to separate them
![Page 8: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/8.jpg)
Q: Bullets are nice, but what if I
want numbers?
<HTML> Lists
1.Yellow Ball 2.Blue Ball 3.Red Ball 4.Purple Ball
A: This is done with
Ordered List and the <ol> tag.
![Page 9: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/9.jpg)
Lets look at Ordered List
<HTML>
Lists
1.Yellow Ball 2.Blue Ball 3.Red Ball 4.Purple Ball
<ol>
<li>Yellow Ball</li>
<li>Blue Ball</li>
<li>Red Ball</li>
<li>Purple Ball</li>
</ol>
The parent tag is now <ol>
but the <li> tags stay.
![Page 10: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/10.jpg)
study
the devotion of time and attention to acquiring
knowledge
design
a plan or drawing produced to show the look
and functionality
work
a person’s regular occupation, profession, or
trade
<HTML> Lists
Next...Definition Lists
![Page 11: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/11.jpg)
First, a different parent tags
<HTML> Lists
<dl>
<dt>study</dt>
<dd>the devotion of time and attention to acquiring knowledge </dd>
<dt>design</dt>
<dd>a plan or drawing produced to show the look and functionality</dd>
<dt>work</dt>
<dd>a person’s regular occupation, profession, or trade</dd>
</dl>
definition list <dl>
![Page 12: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/12.jpg)
Second, now there are 2 tags
<HTML>
Lists
<dl>
<dt>study</dt>
<dd>the devotion of time and attention to acquiring knowledge </dd>
<dt>design</dt>
<dd>a plan or drawing produced to show the look and functionality</dd>
<dt>work</dt>
<dd>a person’s regular occupation, profession, or trade</dd>
</dl>
definition description <dd>
definition term <dt>
![Page 13: HTML List](https://reader038.vdocuments.net/reader038/viewer/2022100600/5569ffded8b42a5d758b4dec/html5/thumbnails/13.jpg)
Give it a try
LeanIT.am has a complete online reference
and example section that will give you more
detailed information and also working samples.
Click to View the HTML List Reference
<HTML> Lists