Creating valid xhtml strict nested lists

By · 8 Comments

To create a nested list that is valid according to the xhtml strict specification, such as the one below:

  • Main List
    • Sub Item
    • Sub Item
    • Sub Item
    • Sub Item
    • Sub Item
    • Sub Item
  • Main List
    • Sub Item
    • Sub Item
    • Sub Item
      • Sub Sub Item
      • Sub Sub Item
    • Sub Item
    • Sub Item
  • Main List
    • Sub Item
    • Sub Item
    • Sub Item
    • Sub Item
    • Sub Item

Follow the code that looks like this:

<ul>
<li>Main List
     <ul>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     </ul>
</li>
<li>Main List
     <ul>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item
          <ul>
          <li>Sub Sub Item</li>
          <li>Sub Sub Item</li>
          </ul>
     </li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     </ul>
</li>
<li>Main List
     <ul>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     </ul>
</li>
</ul>

General Guidelines

-sub lists MUST be encapsulated within the li tags of an item on the base list. I have tried to show this in the blockquote above by indenting each sub list.
- include any formatting within li tags
- use <p> tags to create breaks around an image

Web Development Tutorials to Increase Your Skills

Seeking to improve your HTML and CSS skils? The resources below can help you become a better web developer and designer and help you make your website superior to your competitors:

  • Learn CSS3: In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries.
  • XHTML and HTML Essential Training: Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site
  • Learn HTML5: Author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future.
  • The Complete Web Designer: Ten modules/courses compiled to teach you everything you need to know to become a commercial web designer. Hands-on practical training that simplifies and targets the key techniques needed to build modern web sites. Training from experienced web designers who KNOW what is required in the real world of web design
  • The Complete Web Developer: With so many languages and technologies out there, it is really hard for someone to know what to study and in what order - especially if you want to be able to make a living at it! Course focuses on using PHP and MySQL. The Complete Programmer package is designed to guide you along to the way, step-by-step, towards becoming a professional web programmer.
 

About the Author

Paul Flyer loves to research the web and find resources and tools for building, maintaining and promoting websites. Based in Saint Louis, MO, he works in management and spends his free time sharpening his web development and copy writing skills. Feel free to contact Paul with any questions, comments or ideas. He is also available to help you with your own website.

Visit Paul Flyer's Website