Nested lists a common mistake

Unordered Lists (UL) and Ordered lists (OL) are great.

They present data in a nice bullet point layout by default. I list of links with just a sprinkle of CSS magic can become a vertical menu, a breadcrumb menu or even a tab menu.

You can even have a list inside another list, nested lists.

Here is an example of nested lists.

  • Item 1.1
  • Item 1.2
    • Item 2.1
    • Item 2.2
      • Item 3.1
    • Item 2.3
  • Item 1.3
  • Item 1.4
  • Item 1.5
  • Item 1.6
  • Item 1.1
  • Item 1.2
    • Item 2.1
    • Item 2.2
      • Item 3.1
    • Item 2.3
  • Item 1.3
  • Item 1.4
  • Item 1.5
  • Item 1.6

This is not valid XHTML!

Yes, the browser renders the list as expected, but the XHTML 1.0 DTD States that the only child tag of UL and OL is LI, there for the second (and third) UL must be within the appropriate LI as below.

  • Item 1.1
  • Item 1.2
    • Item 2.1
    • Item 2.2
      • Item 3.1
    • Item 2.3
  • Item 1.3
  • Item 1.4
  • Item 1.5
  • Item 1.6
  • Item 1.1
  • Item 1.2
    • Item 2.1
    • Item 2.2
      • Item 3.1
    • Item 2.3
  • Item 1.3
  • Item 1.4
  • Item 1.5
  • Item 1.6

No related posts.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

About Iain White

I am a professional Web Developer. I have been writing software for over 24 years and I have been a Web Developer for over 13 years now. Most of my web development experience is as a PHP Developer working with LAMP.
Iain White on Google+.
This entry was posted in HTML and tagged . Bookmark the permalink.

7 Responses to Nested lists a common mistake

  1. ptz camera says:

    This amazing is 1 of the most suitable article that My partner and i have read till date on this particular theme. Totally complete yet to the point without the need for any specific nonsense.

  2. ip camera says:

    Thanks because of this! I’ve been searching all above the web for that facts.

  3. seo company says:

    You have an awesome blog. Bookmarking this!

  4. Hello, I love your blog. Do you write all of the articles yourself?

  5. Great goods from you, man. I have understand your stuff previous to and you are just too magnificent. I really like what you have acquired here, really like what you are saying and the way in which you say it. You make it enjoyable and you still care for to keep it sensible. I can’t wait to read far more from you. This is really a great website.

  6. Magnificent goods from you, man. Nested lists a common mistake – WebDev I have understand your stuff previous to and you’re just too excellent. I actually like what you have acquired here, really like what you’re saying and the way in which you say it. You make it entertaining and you still care for to keep it smart. I can not wait to read much more from you. This is actually a wonderful Nested lists a common mistake – WebDev informations.

  7. Rather great posting. I actually just became aware of your blog page and wanted to state that I’ve truly enjoyed analyzing your blog and articles. Nonetheless I’ll be subscribing your feed and I hope to browse your blog again.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>