Chapter 3 - Lists

<Chapter 3 - Lists 

block of text with "things to do" -- make unordered list -- then prioritize list -- then nest "to gets" 

---------

part II  -- definitions 




  <!--ol = ordered list, li = list item-->
  <!--ul = ordered list, li = list item-->
  <!--dl = definition list, dt = definition term, dd = definition description-->

Part I. Unordered & Ordered Lists with Nesting! 

Let's work with this block of text: 

Walk dog, brush teeth, pick up dry cleaning, stop at grocery store (pick up hummus, vegetables, pita, yogurt), pay bills, do laundry, go to the gym 

First we need to make an neat list of our tasks for the day, then we'll put them in order. 

HTML uses the <ul> tag to open an unordered list, and the <li> tag to denote a list item.
So the beginning of the list would look something like this: 

<ul> 
  <li> walk dog </li> 
  <li> brush teeth</li> 
  .... and so on until you've listed all the items. 
 </ul> 

Now that you've made an organized list of your tasks, we need to prioritize them in an ordered list. 
Open the list with the <ol> tag and use the same <li> tag for list items. 

<ol> 
  <li>pay bills</li> 
  <li>go to the gym</li> 
  

You need to pick up a few items from the grocery store, so you can nest them within your list item (<li>) of grocery store. Nested lists are just a list within a list, so they are formatted the same way as a regular list. The trick part is making sure the tags are nested and closed properly. 

Here's an example of a nested list to get you started.  
<ul> 
  <li> print out invitation/li> 
  <li> invite friends 
    <ul>
      <li>Harry</li>
      <li>Jenn</li>
      <li>Tom</li>
      <li>Mary</li>
    </ul>
  </li>
  <li>decorate</li> 
  <li>bake cake</li>
</ul>

After you've finished nesting your listand making sure your tags are closed, you're done! 

Part II. Definitions

To discover the possibilities of definition lists we're going to learn about wine. 

We open definition lists just like the other types of lists, but with the element <dl>. 

Definition lists operate a bit differently because they include the defined term <dt> with the definition description <dd>nested beneath. 

So without further ado, let's get to the wine.

<dl>
  <dt>Petite Sirah/dt>
  <dd>(Sometimes Durif) A red wine produced primarily in California, Australia and Israel. The wine has an herbal aroma and pairs well with barbeque, game meats, and dry cheeses. 
</dl>

With the above example as a guide, create a definition list for these 3 types of wine: 

Pinot Noir: A black grape wine variety grown in the cooler regions of the world. It is light in style and pairs well with lamb, pork, and spicy foods. 

Sauvignon Blanc: A white wine originally of French Origin. It is most commonly attributed to the Bordeaux region as well as the Loire Valley. It pairs well with seafood, poultry and salad. 

Prosecco: A dry (or extra-dry) Italian white, sparkling wine. Usually served chilled as an aperitif, Prosecco pairs well with salty foods such as olives, charcuterie, and most cheeses.