Nested elements – HTML

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>

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

References

HTML basics on MDN