Nesting links to create a story package

Traditional html links provide a one-to-one relationship between the object linked and the destination object. However, content packages often have a more layered and hierarchical relationship to one another.

XHTML offers a hint for the future. Although it isn't supported by any major browser at this point, the and

tags both allow for href's to be specified. With this in mind, it is trivial to define a large block to default to the top level of a content package, with each of the individual objects jumping to their appropriate pages.

Testing Code

<br /> <html></p> <style>body {font: 12px arial;} ul {padding: 0px 1.5em; margin: 0;} h1, h2 {padding: 0; margin: 0;} h1 {font-size: 22px;} h2 {font-size: 14px;} a {text-decoration: none;} a:hover {text-decoration: underline;} div:hover {background-color: #CCC;} div div:hover {background-color: #999; margin: 0px -10px; padding: 2px 20px;} div {padding: 2px 10px;} </style><p><body></p> <div class="module" href="mainpage.html"> <h1><a href="mainpage.html">Main Page</a></h1> <p>This is some teaser text relating to the main page, which should also be directed towards the main page.</p> <div class="module" href="videos.html"> <h2><a href="videos.html">Related Videos</a></h2> <ul> <li><a href="video1.html">Video 1</a></li> <li><a href="video2.html">Video 2</a></li> </ul> </div> <div class="module" href="stories.html"> <h2><a href="stories.html">Related Stories</a></h2> <ul> <li><a href="story1.html">Story 1</a></li> <li><a href="story2.html">Story 2</a></li> </ul> </div> </div> <p></body><br /> </html><br />