Proper way to make HTML nested list

Question

The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE   but they never corrected it with a non-deprecated example  nor explained exactly what is wrong with the example   So which of these ways is the correct way to write an HTML list   Option 1  the nested  lt ul gt  is a child of the parent  lt ul gt    lt ul gt       lt li gt List item one lt  li gt       lt li gt List item two with subitems  lt  li gt       lt ul gt           lt li gt Subitem 1 lt  li gt           lt li gt Subitem 2 lt  li gt       lt  ul gt       lt li gt Final list item lt  li gt   lt  ul gt    Option 2  the nested  lt ul gt  is a child of the  lt li gt  it belongs in   lt ul gt       lt li gt List item one lt  li gt       lt li gt List item two with subitems           lt ul gt               lt li gt Subitem 1 lt  li gt               lt li gt Subitem 2 lt  li gt           lt  ul gt       lt  li gt       lt li gt Final list item lt  li gt   lt  ul gt

User · Answer

Have you thought about using the TAG  dt  instead of  ul  for nesting lists  It s inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside    lt dl gt     lt dt gt Coffee lt  dt gt       lt dd gt Black hot drink lt  dd gt     lt dt gt Milk lt  dt gt       lt dd gt White cold drink lt  dd gt   lt  dl gt    VS   lt ul gt      lt li gt Choice A lt  li gt      lt li gt Choice B        lt ul gt            lt li gt Sub 1 lt  li gt            lt li gt Sub 2 lt  li gt         lt  ul gt      lt  li gt   lt  ul gt

User · Answer

What s not mentioned here is that option 1 allows you arbitrarily deep nesting of lists   This shouldn t matter if you control the content css  but if you re making a rich text editor it comes in handy   For example  gmail  inbox  and evernote all allow creating lists like this     With option 2 you cannot due that  you ll have an extra list item   with option 1  you can

User · Answer

Option 2 is correct   The nested list should be inside a  lt li gt  element of the list in which it is nested   Link to the W3C Wiki on Lists  taken from comment below   HTML Lists Wiki   Link to the HTML5 W3C ul spec  HTML5 ul  Note that a ul element may contain exactly zero or more li elements   The same applies to HTML5 ol  The description list  HTML5 dl  is similar  but allows both dt and dd elements   More Notes    dl   definition list  ol   ordered list  numbers   ul   unordered list  bullets

User · Answer

Option 2   lt ul gt   lt li gt Choice A lt  li gt   lt li gt Choice B    lt ul gt       lt li gt Sub 1 lt  li gt       lt li gt Sub 2 lt  li gt     lt  ul gt   lt  li gt   lt  ul gt    Nesting Lists - UL

User · Answer

Option 2 is correct  The nested  lt ul gt  is a child of the  lt li gt  it belongs in      If you validate  option 1 comes up as an error in html 5 -- credit  user3272456     Correct   lt ul gt  as child of  lt li gt   The proper way to make HTML nested list is with the nested  lt ul gt  as a child of the  lt li gt  to which it belongs   The nested list should be inside of the  lt li gt  element of the list in which it is nested    lt ul gt       lt li gt Parent Item          lt ul gt               lt li gt Child Subitem              lt  li gt           lt  ul gt       lt  li gt   lt  ul gt      W3C Standard for Nesting Lists  A list item can contain another entire list     this is known as  nesting  a list  It is useful for things like tables of contents  such as the one at the start of this article         Chapter One         Section One   Section Two   Section Three      Chapter Two   Chapter Three      The key to nesting lists is to remember that the nested list should relate to one specific list item  To reflect that in the code  the nested list is contained inside that list item  The code for the list above looks something like this    lt ol gt     lt li gt Chapter One      lt ol gt         lt li gt Section One lt  li gt         lt li gt Section Two  lt  li gt         lt li gt Section Three  lt  li gt       lt  ol gt     lt  li gt     lt li gt Chapter Two lt  li gt     lt li gt Chapter Three   lt  li gt   lt  ol gt    Note how the nested list starts after the  lt li gt  and the text of the containing list item     Chapter One      then ends before the  lt  li gt  of the containing list item  Nested lists often form the basis for website navigation menus  as they are a good way to define the hierarchical structure of the website   Theoretically you can nest as many lists as you like  although in practice it can become confusing to nest lists too deeply  For very large lists  you may be better off splitting the content up into several lists with headings instead  or even splitting it up into separate pages

User · Answer

I prefer option two because it clearly shows the list item as the possessor of that nested list   I would always lean towards semantically sound HTML

User · Answer

If you validate   option 1 comes up as an error in html 5  so option 2 is correct

[html] Proper way to make HTML nested list?

Examples related to html

Examples related to html-lists

Examples related to nested-lists