Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Lists HTML Lists - Ordered and Unordered

Posted by nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Nesting list inside another list

Can I know is there any rule to nest list inside another list in list element

Example 1

<ul>
    <li>Example</li>
     <ol>
          <li>Inner List</li>
     </ol>
    <li>Example1</li>
</ul>

Example 2

<ul>
    <li>Example
       <ol>
            <li>Inner List</li>
       </ol>
     </li>
    <li>Example1</li>
</ul>

Both examples give the same output. Why did Mr. Nick do it in second example way? Anyone here know is there any reason or semantic meaning?

Thanks in advance,

1 Answer

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Your second example is semantically correct. According to the W3C: "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."

Basically, you're just showing that all of the items in the nested list are related to the parent list item.

This is easier to understand with a real example, like a shopping list:

<ul>
  <li>Fruits
    <ul>
        <li>Apples</li>
        <li>Oranges</li>
        <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
        <li>Carrots</li>
        <li>Celery</li>
        <li>Kale</li>
    </ul>
  </li>
  <li>Meat
    <ul>
        <li>Chicken</li>
        <li>Beef</li>
    </ul>
  </li>
</ul>
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

@Shawn Flanigan Great response. Thank you so much.

In Definition List, web browser does not give the same result. It seems, definition list follow W3C rule strictly.

"The key to nesting lists is to remember that the nested list should relate to one specific list item. 

  <dl>
            <dt>Unordered list</dt>
            <dd>Unordered lists indent the content and use bullets to point them.</dd>
            <dt>Ordered list</dt>
            <dd>Ordered list indent as well and use numbers to point content</dd>
            <dt>Definition list</dt>
            <dd>Definition list does not indent definition title but definition data.
            <dl>
            <dt>Definiton Data</dt>
            <dd>Definition data is a information about definition title</dd>
            </dl>
            </dd>
  </dl>

  <dl>
            <dt>Unordered list</dt>
            <dd>Unordered lists indent the content and use bullets to point them.</dd>
            <dt>Ordered list</dt>
            <dd>Ordered list indent as well and use numbers to point content</dd>
            <dt>Definition list</dt>
            <dd>Definition list does not indent definition title but definition data.</dd>
            <dl>
            <dt>Definiton Data</dt>
            <dd>Definition data is a information about definition title</dd>
            </dl> 
  </dl>

The above html snippets have different outputs.

Thanks again,

Karthkeyan