Advanced Topics

Lists

Purpose of Lists

Lists are a way to visually organize related information. They contains words that are related or associated with one another, and are formatted to emphasis them on the page

Unordered Lists are words that are associated with one another, but to not have an order or precedents among themselves

Ordered Lists are similar to Unordered Lists, but each part has a rank or order among one another

Description Lists are different that the previous two. They format word groups on the page in a word/definition pair. Description Lists are less often used compared to Unordered and Ordered

Unordered List <UL>

A list where the order is not important is called an Unordered List in HTML. The <ul></ul> defined a section where List Items <LI> are inserted to generate a bulleted list

While the list is displayed with no order (bullets, rather than numbers), the order the List Items inside the <ul></ul> block is the order they will appear on the page

Example:
html
<!DOCTYPE html>
<html>
 <body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul> 
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
Creates a list of 3 items in the order they are listed inside the <ul></ul> tags
Below is what how it will appear in a browser
Coffee
Tea
Milk

Ordered List <OL>

A list where the order is important is called an Ordered List in HTML. The <ol></ol> defined a section where List Items <LI> are inserted to generate a numbered list

The list is displayed with an order (numbers, rather than bullets), the order the List Items inside the <ul></ul> block is the order they will appear on the page

Example:
html
<!DOCTYPE html>
<html>
 <body>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol> 
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
Creates a list of 3 items in the order they are listed inside the <ol></ol> tags
Below is what how it will appear in a browser
Coffee
Tea
Milk

Description List <DL>

A list containing term/definition groups is called an Description List in HTML. The <dl></dl> defined a section where Description Term <DT> and Description Definition<DD> are inserted to generate a numbered list

The list is displayed with an order (numbers, rather than bullets), the order the List Items inside the <dl></dl> block is the order they will appear on the page

Example:
html
<!DOCTYPE html>
<html>
 <body>
    <dl>
      <dt>Coffee</dt>
      <dd>Favorite morning beverage</dd>
      <dt>Tea</dt>
      <dd>Perfect for a cold evening</dd>
      <dt>Milk</dt>
      <dd>Great on cereal or in hot cocoa</dd>
    </dl> 
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
Creates a list of 3 item pairs in the order they are listed inside the <dl></dl> tags
Below is what how it will appear in a browser
Coffee
Favorite morning beverage
Tea
Perfect for a cold evening
Milk
Great on cereal or in hot cocoa

Styling Lists

The bullet or number style can be changed in the CSS file using the list-style-type property

<UL> Example:
html
<!DOCTYPE html>
<html>
 <body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul> 
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
css
ul {
 list-style-type: circle;
}
1
2
3
Below is what how it will appear in a browser
Coffee
Tea
Milk
css
ul {
 list-style-type: square;
}
1
2
3
Below is what how it will appear in a browser
Coffee
Tea
Milk

<OL> Example:
html
<!DOCTYPE html>
<html>
 <body>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol> 
 </body>
</html>
1
2
3
4
5
6
7
8
9
10
css
ol {
 list-style-type: lower-alpha;
}
1
2
3
Below is what how it will appear in a browser
Coffee
Tea
Milk
css
ol {
 list-style-type: upper-roman;
}
1
2
3
Below is what how it will appear in a browser
Coffee
Tea
Milk

Advanced Topics ​

Purpose of Lists ​

Unordered List <UL> ​

Ordered List <OL> ​

Description List <DL> ​