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 Reviews:
Post a Comment
If you have any doubts, Let me know, Please!