HTML Lists
Control List Counting
Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute
Example
<!DOCTYPE html> <html> <body> <ol start="50"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
HTML Description Lists
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term
Example
<!DOCTYPE html> <html> <body> <dl> <dt>Coffee </dt> <dt>Tea </dt> <dt>Milk </dt> </dl> </body> </html>
HTML Document Output
- Coffee
- - black hot drink
- Milk
- - white cold drink
Ordered HTML List
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example
<!DOCTYPE html> <html> <body> <ol> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Ordered HTML List - Choose List Item Marker
| Type | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default) |
| type="A" | The list items will be numbered with uppercase letters |
| type="a" | The list items will be numbered with lowercase letters |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="i" | The list items will be numbered with lowercase roman numbers |
Numbers: Example
<!DOCTYPE html> <html> <body> <ol type="1";"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Uppercase Letters Example
<!DOCTYPE html> <html> <body> <ol type:"A";> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Lowercase Letters Example
<!DOCTYPE html> <html> <body> <ol type="a"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Uppercase Roman Numbers Example
<!DOCTYPE html> <html> <body> <ol type="I"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Lowercase Roman Numbers
<!DOCTYPE html> <html> <body> <ol type="i"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ol> </body> </html>
Document Output
- Coffee
- Tea
- Milk
HTML Unordered Lists
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Example
<!DOCTYPE html> <html> <body> <ul> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ul> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Unordered HTML List - Choose List Item Marker
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Disc Example
<!DOCTYPE html> <html> <body> <ul style="list-style-type:disc;"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ul> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
circle Example
<!DOCTYPE html> <html> <body> <ul style="list-style-type:circle;"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ul> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
Square Example
<!DOCTYPE html> <html> <body> <ul style="list-style-type:square;"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ul> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
None Example
<!DOCTYPE html> <html> <body> <ul style="list-style-type:none;"> <li>Coffee </li> <li>Tea </li> <li>Milk </li> </ul> </body> </html>
HTML Document Output
- Coffee
- Tea
- Milk
0 Comments: