Help:Wiki University HTML-- Nesting Lists

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

NESTING LISTS

Nested List5.png

Many times you need to break down individual items in a list. If you had a list of fruits like this:

  • Apples
  • Pears
  • Cherries
  • Oranges

You might want to include some different varieties for each fruit mentioned. If you wanted to state the kinds of apples, for example: Granny Smith, Golden Delicious and Red Delicious, you would nest a list between apples and pears like so:

  • Apples
    • Granny Smith
    • Golden Delicious
    • Red Delicious
  • Pears
  • Cherries
  • Oranges
  • NOTICE each variety is on a separate line.
  • NOTICE each item on the nested lists is indented.

You can even nest lists inside of nested lists by using more asterisks.

CREATING UNORDERED NESTED LISTS

<ul>

<li>Apples
<ul>
<li>Granny Smith</li>
<li>Golden Delicious</li>
<li>Red Delicious</li>
</ul>
</li>


<li>Pears</li>
<li>Cherries</li>
<li>Oranges</li>

</ul>

(The HTML code was indented to make studying the code a bit easier.)

  • NOTICE that the "nested list" is enclosed with its own pair of <ul> opening and closing tags shown in red. This is important. Study this carefully.

Heres how the nested list looks on the page:

  • Apples
    • Granny Smith
    • Golden Delicious
    • Red Delicious
  • Pears
  • Cherries
  • Oranges
  • NOTICE each variety is on a separate line.
  • NOTICE each item on the nested lists is indented.

You can even nest lists inside of nested lists by placing the new nest of items inside a pair of <ul> tags.

CREATING ORDERED NESTED LISTS

Creating ordered nested lists works in the same way as unordered lists. Just substitute <ol> for <ul> tags.

You can nest ordered lists inside of other ordered nested lists, but they will all have numbers instead of letters or roman numerals.

You cannot nest ordered lists inside unordered lists and vice versa.

HTML and WIKITEXT

HTML Wikitext

<ul>
<li>Apples
<ul>
<li>Granny Smith</li>
<li>Golden Delicious</li>
<li>Red Delicious</li>
</ul>
</li>
<li>Pears</li>
<li>Cherries</li>
<li>Oranges</li>
</ul>


*Apples

** Granny Smith
** Golden Delicious
** Red Delicious

*Pears
*Cherries
*Oranges

As you can see, Wikitext is simpler to use, but again you have no way to make changes to the formatting of these nested lists.

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Using HTML code practice nesting unordered lists, in your sandbox create a list with the following items: Fruits, Vegetables, Nuts and Grains. In between each item list three varieties.


Quick Quiz
  • If you were nesting a list of states in no particular order in a list of countries, which list would you use?:
A. Ordered List
B. Unordered List
  • If you were nesting a list of states by size in a list of countries by size, which lists would you use?
A. Ordered List
B. Unordered List

Navigation menu