There are 3 different types of lists.
* <ul> - unordered list; bullets
* <ol> - ordered list; numbers
* <dl> - definition list; dictionary
A <ol> tag starts an ordered list,
<ul> for unordered lists, and <dl> for definition lists.
1. HTML Ordered Lists
Use the <ol> tag to begin an ordered list.
Place the <li> (list item) tag between your opening <ol> and
closing </ol> tags to create list items.
Ordered simply means numbered, as the list below demonstrates.
HTML Code:
<h3>Names</h3>
<ol>
<li>Aqsa</li>
<li>Muskan</li>
<li>Hassan</li>
<li>Sameer</li>
</ol>
Output:
Names
1. Aqsa
2. Muskan
3. Hassan
4. Sameer
Start your ordered list on any number besides 1 using the start attribute.
HTML Code:
<h3>Names</h3>
<ol start="4">
<li>Aqsa</li>
<li>Muskan</li>
<li>Hassan</li>
<li>Sameer</li>
</ol>
Output:
Names
4. Aqsa
5. Muskan
6. Hassan
7. Sameer
Nothing fancy here,
start simply defines which number to begin numbering with.
In Ordered Lists, There are 4 other types of ordered lists.
Instead of generic numbers you can replace them with Roman
numberals or letters, both capital and lower-case.
Use the type attribute to change the numbering.
HTML Code:
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
Ordered List Types:
Lower-Case Letters
a. HTML
b. CSS
c. Java Script
Upper-Case Letters
A. HTML
B. CSS
C. Java Script
Roman Lower-Case Numerals
i. HTML
ii. CSS
iii. Java Script
Roman Upper-Case Numerals
I. HTML
II. CSS
III. Java Script
2. Unorder List
Create a bulleted list with the <ul> tag.
The bullet itself comes in three flavors:
squares, discs, and circles.
The default bullet displayed by most web browsers is the
traditional full disc.
HTML Code:
<h3>Names</h3>
<ul>
<li>Aqsa</li>
<li>Muskan</li>
<li>Hassan</li>
<li>Sameer</li>
</ul>
Unordered Lists Output:
Names
* Aqsa
* Muskan
* Hassan
* Sameer
Here's a look at the other flavors of unordered lists may look like.
Unordered List Types:
type="square" type="disc" type="circle"
HTML Code:
<ul type="square">
<ul type="disc">
<ul type="circle">
3. HTML Definition Term Lists
Make definition lists as seen in dictionaries using the <dl> tag.
These lists displace the term word just above the definition itself
for a unique look.
It's wise to bold the terms to displace them further.
* <dl> - defines the start of the list
* <dt> - definition term
* <dd> - defining definition
HTML Code:
<dl>
<dt><b>HTML</b></dt>
<dd>Hyper Text Markup Language.</dd>
<dt><b>PHP</b></dt>
<dd>French word for car.</dd>
</dt>
HTML Code:
HTML
Hyper Text Markup Language.
PHP
Hypertext Preprocessor.
Formatting Tags