Summary
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Details
In addition to containing text, elements can contain other elements. Elements inside of other elements are called nested elements.
Sometimes the outer element will just contain other elements, as in the example above. Notice how the li elements inside the ol element are indented. When the outer element only contains other elements and no extra text, it’s a common practice to indent the nested elements. The indentation has no effect on the way the elements look in the browser–it’s just used to make the code easier to read.
In some cases, the outer element will contain text of its own, as in the following example:
<p>The <code>h1</code> element is used to create headings in HTML.</p>In this example, the nested element modifies a section of text inside the outer element. Indentation is not required in this case since the nesting occurs in the middle of a sentence.
Multiple levels
An element can be nested inside multiple elements, like this:
<ol>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ol>This is an example of a list nested inside another list. Notice how the subitem li elements are nested inside a ul element, which is in turn nested inside another li element, which is in turn nested inside an ol element.
Demo
Exercises
Recreate the code snippet in the Demo section by typing out the code in your index.html file.
References
HTML basics on MDN