Inserting unordered Lists - HTML5 - page 103

Lesson requirements

You will need the tpa_jupiter.html file from the Lesson_13 folder, a text editor, and a web browser.

You can download the code and resources for this lesson from the topic's web
page at www.wrox.com .

step-by-step
1.

Open your text editor.

2. From the Lesson_13 folder, open tpa_jupiter.html .

3.

Put your cursor at the end of the text Here's what you'll need to make the most of
your Jovian jaunt: after the closing </p> tag and press Enter (Return).

4. Enter the following code:

<ul>
<li>Oxygen converter mask (Jupiter certified)</li>
<li>Thermal transistion suit</li>
<li>Portable storm shelter</li>
</ul>

5.

Save your file.

6. In your browser, open tpa_jupiter.html .

nesTinG unordered LisTs

A standard unordered list gives equal weight to all the bulleted items, one after another. In some
situations, it's desirable to depict multiple levels of content with sub-items. HTML provides the
capacity to incorporate any level of sub-items desired by nesting <ul> tags.

Say your online camera store carries digital SLR, compact, and waterproof cameras. The store
might list them on its site in an unordered list:

<ul>
<li>Digital SLR Cameras</li>
<li>Compact Cameras</li>
<li>Waterproof Cameras</li>
</ul>

Should the store want to show the range of resolutions available in the digital SLR category, it would
nest a <ul> tag under that list item, like this:

<ul>
<li>Digital SLR Cameras
<ul>