Some Tags for You to Meet (P2PU Task)

On this task we were asked to spend sometime reading about HTML tags. Thanks to Mozilla's reference page (HTML Elements) this has been a breeze!

What I learned is this:



Div: Creates a division or portion within the page content


    <div>
        <h2>
        <p>Pineapple Mojito Process:</p>
        </h2>
    </div>



Blockquote: Use to indicate quotations used from other places. An URL from a diff page can be added to cite the actual quote origin.

 

  <p>Bringing tropical exciment to your taste buds</P>
  <blockquote cite="http://www.mojitos/recipes/pineapplemojitoprocess.us">
  <p>This is a quotation taken from the best mojito research site.</p>
  </blockquote>



Li: Creates a list of items through an "unordered or ordered list" as seen few lines below.

  

Ul:  Displays unordered lists of items (ingredients list)

     <ul>
        <li>* 12 fresh mint leaves</li>
        <li>* 2 teaspoons sugar</li>
        <li>* 1 lime, quartered</li>
        <li>* Ice cubes</li>
        <li>* 4 tablespoons pineapple juice concentrate</li>
        <li>* 1/2 cup white rum</li>
        <li>* 1/2 cup club soda</li>
    </ul>  
      

Ol: Displays ordered list of elements (steps 1-2-3)

    

<ol>  
    <li>1 - Divide the mint, sugar, and lime wedges among 4 old-fashioned glasses.</li>
    <li>2 - Using a pestle (from a mortar and pestle) or the end of a wooden spoon, mash the mint, sugar, and lime together.</li>
    <li>3 - Add some ice</li>
    <li>4 - Top off with some pineapple juice concentrate, white rum, and club soda.</li>
    <li>5 - Swirl with a sugar cane stick and serve</li> 
</ol>  



Nav: Defines the page navigation sections (Home, About Us, Contact Us)


    <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Recipes</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
    </nav>



Menu: Add extra control buttons to the page. .i.e. Print, Export to excel

<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="print()">Print...</button>
      <button type="button" onclick="export()">Export...</button>
    </menu>
  </li>



Span: Inline container used for styling purposes

   <div>
        <h2>
        <p><span>Pineapple Mojito Process:</span></p>
        </h2>
    </div>



Time: Element used to present accurate time stamps

    <p>This page was last updated on <time datetime="2012-05-16 15:40">May 16</time>.</p>




Q: Indicates that the text is a quotation

    <p>Hosted described their drinks as, <q>The best Pineapply Mojito ever!</q>.</p>



Img: Represents an image within the page

        <img src="mojito.jpg" alt="Pineapple Mojito" />

Notice the attribute "src" which indicates the source and "atl" an optional display text that describes the image