Usually we use quite plain structure of content on the website. Sometimes we have to point out some paragraphs on the website. If the structure is not complicated we can use unordered lists ul or ordered lists ol.
Let’s think about more complicated structure, ie. terms and conditions on website. The goal is to have automatic numbering for the paragraphs and the output should looks like the example below:
1. Point number one
1.1 First subpoint for one
1.2 Second subpoint for one
1.2.1 Something for subpoint
1.2.2 Something else for subpoint
1.3 Third subpoint for one
2. Point number two
2.1 First subpoint for two
2.2 Second subpoint for two
If we use multiple inherited ordered lists, each one will be independent and will not take care about parents.
But here we can use css to reach the goal:
ol {list-style:none;}
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; font-weight: bold}
The code above will take care of handling counters for each level and put the proper numbering for each paragraph.