HTML - Lists
HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists (think: dictionaries). Each list type utilizes its own unique list tag, which we'll demonstrate below.
HTML List Item Code:
<body>
<ul>
<li>I am a list item!>
<li>I am a list item too!>
<li>I am a list item also!>
</ul>
</body>
HTML List Items:
- I am a list item!
- I am a list item too!
- I am a list item also!
The actual list tags themselves, such as <ul>, are nothing but container elements for list items (<li>). They work behind the scenes to identify the beginning and ending of an HTML list element.
HTML - Unordered Lists
An unordered list (<ul>) signifies to a web browser that all list items contained inside the <ul> tag should be rendered with a bullet preceding the text. The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type.
HTML Default Bullet List Code:
<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>
HTML Default Disc Bullets:
Shopping List
- Milk
- Toilet Paper
- Cereal
- Bread
To render a list with a different bullet type, add a type attribute to the unordered list element. Using the same code in the example above, replace the <ul> line from the previous example with any of the lines listed below to change the bullet from disc shape to another shape.
HTML Unordered List Type Code:
<ul type="square">
<ul type="disc">
<ul type="circle">
HTML Unordered List Types:
| type="square" | type="disc" | type="circle" |
- Milk
- Toilet Paper
- Cereal
- Bread
| - Milk
- Toilet Paper
- Cereal
- Bread
| - Milk
- Toilet Paper
- Cereal
- Bread
|
HTML - Ordered Lists
An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are preceded with numbers instead of bullets.
HTML Numbered/Ordered List:
<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>
HTML Numbered List:
Goals
- Find a Job
- Get Money
- Move Out
The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting the type attribute.
HTML Code:
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
Ordered List Types:
| Lower-Case Letters | Upper-Case Letters | Lower-Case Numerals | Upper-Case Numerals |
- Find a Job
- Get Money
- Move Out
| - Find a Job
- Get Money
- Move Out
| - Find a Job
- Get Money
- Move Out
| - Find a Job
- Get Money
- Move Out
|
The start attribute allows you to further customize an HTML ordered list by setting a new starting digit for the ordered list element.
HTML Numbered List Start Attribute:
<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>
HTML Numbered List Start - 4:
Goals
- Buy Food
- Enroll in College
- Get a Degree
HTML - Definition Term Lists
HTML definition lists (<dl>) are list elements that have a unique array of tags and elements; the resulting listings are similar to those you'd see in a dictionary.
- <dl> - opening clause that defines the start of the list
- <dt> - list item that defines the definition term
- <dd> - definition of the list item
These lists displace the word term (<dt>) in such a way that it rests just above the definition element (<dd>) to offer a very unique look. For best, results we suggest bolding the definition terms with the bold tag <b>.
HTML Definition List Code:
<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
</dl>
HTML Definition List Display:
Fromage
French word for cheese.
Voiture
French word for car.
Tips
- Use the start and type attributes to customize list elements.
- It is possible to make lists of lists, which is helpful for creating some items, such as outlines.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! | 
