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 Responsive Design Template Collection to study the art of using nested lists to create drop down menus.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried out RWD template kit? Download Template #402 - 6 Page Kit