replace non-semantic div with semantic section tags

Author: Tobias-Amaechina

Form-Controls/index.html

@@ -14,26 +14,26 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- First name-->
-         <div class="form-group">
+         <section class="form-group">
           <label for = "first-name">First Name</label>
           <input type="text" id="first-name" name="first-name" required pattern=".*\S.*\S.*"
         arial-describedby="fnameHelp"</>
           <small id="fnameHelp">Must be at least 2 characters long</small>
-         </div>
+         </section>
           <!-- Last name-->
-          <div class="form-group">
+          <section class="form-group">
           <label for = "last-name">Last Name</label>
           <input type="text" id="last-name" name="last-name" required pattern=".*\S.*\S.*"
         arial-describedby="lnameHelp"</>
           <small id="lnameHelp">Must be at least 2 characters long</small>
-         </div>
+         </section>
           <!-- Email-->
-          <div class="form-group">
+          <section class="form-group">
           <label for = "email">Email</label>
           <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
         arial-describedby="emailHelp"</>
           <small id="emailHelp">Must be a valid email address</small>
-          </div>
+          </section>
 
 
         <!--