<html>
<head><title>Nested List</title></head>
<body>
<ol start="3">
<li>This is topic 3
<ul>
<li>This is subtopic 1</li>
<li>This is subtopic 2</li>
<li>This is subtopic 3</li>
</ul>
</li>
<li>This is topic 4</li>
<li value="9">This is topic 9</li>
<li>This is topic 10</li>
</ol>
</body>
</html>
The code consists of two lists; the first list is about the main topic which starts with topic 3 and the second list is the subtopic of topic 3. The code will be displayed by the browser this way:
As you can see the second list is indented from the first list. The first topic is started with the number 3 because of the start attribute of <ol> element. After the fourth topic the list jumps to number 9 that is because of the value attribute placed in the list item tag of the topic 9.
About the code:
- The attribute start=”integer” tells the browser what number to start counting at. Normally you want to start at 1, but sometimes you may need to start at a higher number.
- The attribute value=”integer” can be used to change the numbering for all other list items.
TIP: Extra spaces and lines will just be ignored by the browser, with this property you can add extra spaces or tab to your code so that it would be easy for you to identify the main list (main topic) from the sub-list (subtopic) when creating a nested list.
0 comments:
Post a Comment