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 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.
