Practice: HTML Text Fundamentals

This article continues our discussion on writing HTML and describes how to structure a webpage. Start by downloading and viewing the unstructured Quick Hummus Recipe. Then, use the Active Learning sections to learn how to structure the document using interactive examples.

You will see that there are several reasons why the structure of a webpage is essential, including use by screen readers and locating pages using a search engine. The complete solution is located here.

Lists

Nested List

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top-level bullet. Let's take the second list from our recipe example:

<ol>

   <li>Remove the skin from the garlic, and chop coarsely.</li>

   <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>

   <li>Add all the ingredients into a food processor.</li>

   <li>Process all the ingredients into a paste.</li>

   <li>If you want a coarse "chunky" hummus, process it for a short time.</li>

   <li>If you want a smooth hummus, process it for a longer time.</li>

 </ol>

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list and put that list inside the current fourth bullet. This would look like so:

<ol>

   <li>Remove the skin from the garlic, and chop coarsely.</li>

   <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>

   <li>Add all the ingredients into a food processor.</li>

   <li>Process all the ingredients into a paste.

     <ul>

       <li>If you want a coarse "chunky" hummus, process it for a short time.</li>

       <li>If you want a smooth hummus, process it for a longer time.</li>

     </ul>

   </li>

 </ol>