| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nested HTML Example</title> | |
| </head> | |
| <body> | |
| <nav class="main-nav"> | |
| <a href="#">Home</a> | |
| <a href="#">About</a> | |
| <a href="#">Services</a> | |
| <a href="#">Contact</a> | |
| </nav> | |
| <div class="page"> | |
| <header class="header"> | |
| <h1>Simple Page</h1> | |
| </header> | |
| <div class="content-wrapper"> | |
| <main class="main-content"> | |
| <div class="section"> | |
| <h2>First Section</h2> | |
| <p>Some example content inside the page.</p> | |
| <div class="subtree"> | |
| <div> | |
| <div class="inner-block"> | |
| <div> | |
| <p>This text is inside a deeper nested div.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-alt"> | |
| <h2>Second Section</h2> | |
| <div class="level-one"> | |
| <div class="level-two"> | |
| <div class="level-three"> | |
| <div class="level-four"> | |
| <span>Text at a deeper level</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="secondary-nav"> | |
| <a href="#">One</a> | |
| <a href="#">Two</a> | |
| <a href="#">Three</a> | |
| </nav> | |
| </div> | |
| <div> | |
| <div class="card"> | |
| <h3>Nested Card</h3> | |
| <div> | |
| <div class="details"> | |
| <p>Another nested text node.</p> | |
| <div> | |
| <div> | |
| <span>Even deeper text</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <footer class="footer"> | |
| <div class="footer-inner"> | |
| <p>Footer information</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <div class="bottom-area"> | |
| <div> | |
| <div> | |
| <div> | |
| <p>This is text near the bottom of the DOM tree.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p>Text at the bottom node</p> | |
| </body> | |
| </html> |