<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
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.
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
Recreate the code snippet in the Demo section by typing out the code in your index.html file.
HTML basics on MDN