Converting an Old Template to a Semantic Wireframe
Instructions: Open your HTML editor and create the webpage with the wireframe and content shown in Figure 2–34. The starting data fie contains many div tags that you will replace with more meaningful, semantic HTML5 elements.

Perform the following tasks:
1. Open the ski02.html file from the Data Files for Students and then modify the HTML code to update it to semantic HTML5 as shown in Figure 2–34. Be sure to

    make the following updates:
        a. Change the DOCTYPE statement. The HTML5 DOCTYPE statement is different and greatly simplified from any version of the HTML4 DOCTYPE statement.
        b. Replace the <div id="name">…</div> tags with their semantic HTML5 counterparts.
        c. Add all of the content including two headings in the <header>…</header> section and the <p>…</p> paragraph content in the <nav>, <main>, and <footer>

          sections. The company name in the <header> section should be marked up with <h1> tags. The tagline “Let it snow, let it snow, let it snow” should be marked

          up with <h2> tags.
        d. To mark up and duplicate the line spacing in the <main> section, insert a beginning paragraph tag before the “Ski Instructor:” text and insert an ending

             paragraph tag after the zip code. insert line break tags after the instructor’s name and the street address. Mark up the phone and email lines each as

            their own paragraph. Enter a line break tag after the phone number.

2. Save and review your work. Check the spelling of the content on the webpage.
3. Validate your webpage using the W3C validator at validator.w3.org and fix any errors that it identifies. Validation is complete when the validator returns the message “This        document was successfully checked as HTML5!” in a green bar near the top of the webpage. 
4. Submit the ski02.html file in a format specified by your instructor.
5. After reflecting on this exercise and using outside resources if needed, answer the following questions that further explore the appropriate use of the div element.
     a. What does the div element represent?
     b. What is the div element used for?
     c. Why do HTML5 webpages use fewer div tags than HTML4 pages?
     d. Why is the div element still used in HTML5?
     e. Why is the id attribute almost always used with the div element?