Nesting HTML Web Page Elements

So what's nesting?

Nesting is the act of placing one web page element of the same kind or like kind within another .

Web page elements that can be nested are tables, divisions and lists.

Nesting Tables

In the old days we created web pages using nested tables. Today nested tables can be used to build complicated data table structures.

<table>
    <tr>
        <td>
            <table>
            <tr>
            <td></td>
            </tr></table>
        </td>
        <td></td>
    </tr>
</table>

Tables are nested by placing a table within the cell of an existing table as shown in red.

Nesting Divisions

The accepted method of building websites includes nesting divisions. Place several inside of a container division to create columns on a web page.

<div id="container">
  <div id="left"></div>
  <div id="middle"></div>
  <div id="right"></div>
</div>

Nesting Lists

When nesting lists they can be different types. For example, you can nest a definition list inside of an unordered list .

Some of our templates use nested lists to develop drop down menus.

<ul class="art-menu">
  <li><a href="#">First Level</a></li>
  <li><a href="#">First Level</a>
    <ul>
      <li><a href="#">Second Level</a></li>
      <li><a href="#">Second Level</a></li>
    </ul>
  </li>
  <li><a href="#">First Level</a></li>
  <li><a href="#">First Level</a>
    <ul>
      <li><a href="#">Second Level</a>
        <ul>
          <li><a href="#">Third Level</a> </li>
          <li><a href="#">Third Level</a> </li>
          <li><a href="#">Third Level</a> </li>
        </ul>
      </li>
      <li><a href="#">Second Level</a></li>
      <li><a href="#">Second Level</a></li>
    </ul>
  </li>
  <li><a href="#">First Level</a></li>
</ul>

The code shown above produces a 3 tier drop down menu using nested lists.

It sounds confusing, but the 3rd level is created by nesting a list within a nested list.

Advanced students can use the templates in our Free Template Collection to study the art of using nested lists to create drop down menus.