Example of replacements for HTML tag

Question

I am working on a project where one of the parts i am creating a "contact us" section, where it includes general information like, address, gmail, telephone number, and a different part of it is an actual form where you can type in the information. I tend to rely alot on the "div" tag even though it is not semantic. I want to clean up my code and some how replace as many of these divs as possible with more semantic tags. I have tried to search up tags to somehow replace the divs i have, but can not find tags that i can replace them with.

This is a screenshot of the footer for some context https://i.stack.imgur.com/s2Cei.jpg

        <footer>
            <section class="contact">
                <div class="content">
                    <h2>Contact Us</h2>
                    <p>
                        If you ever want to get in contact with us, or ask us 
                        a question, do not hesitate to send us a message using
                        the form below!
                    </p>
                </div>
                <div class="container">
                    <div class="contactInfo">
                        <div class="box">
                            <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="text">
                                <h3>Address</h3>
                                <p>5263 Fantasy Kebab Road, <br>Bergen, Norway, <br>55060</p>
                            </div>
                        </div>
                        <div class="box">
                            <div class="icon"><i class="fas fa-phone"></i></div>
                            <div class="text">
                                <h3>Phone</h3>
                                <p>21-666-9112</p>
                            </div>
                        </div>
                        <div class="box">
                            <div class="icon"><i class="far fa-envelope"></i></div>
                            <div class="text">
                                <h3>Email</h3>
                                <p>bigemail@gmail.com</p>
                            </div>
                        </div>
                    </div>

                    <form class="contactForm">
                        <h2>Send Message</h2>
                        <div class="inputBox">
                            <input type="text" name="full_name" required="required">
                            <span>Full Name</span>
                        </div>
                        <div class="inputBox">
                            <input type="text" name="email" required="required">
                            <span>Email</span>
                        </div>
                        <div class="inputBox">
                            <textarea required="required"></textarea>
                            <span>Type your Message...</span>
                        </div>
                        <div class="inputBox">
                            <input type="submit" name="submit_button" value="Send">
                        </div>
                    </form>
                </div>
            </section>
        </footer>

Answer 1

You should definitely replace the divs that wrap your inputs with labels.

Without labels, this is how your input fields will be read a screen reader (in these examples, I'm using Voiceover). Notice how the input is not described as Full Name, or anything meaningful for the user to know what should go into this input.

label {
  display: block;
}

<footer>
  <section class="contact">
    <form class="contactForm">
      <h2>Send Message</h2>
      <label class="inputBox">
          <input type="text" name="full_name" required="required">
          <span>Full Name</span>
        </label>
      <label class="inputBox">
          <input type="text" name="email" required="required">
          <span>Email</span>
        </label>
      <label class="inputBox">
          <textarea required="required"></textarea>
          <span>Your Message</span>
        </label>
      <div class="inputBox">
        <input type="submit" name="submit_button" value="Send">
      </div>
    </form>
  </section>
</footer>

With a label element, the screen reader has a way to describe the field by the text that is inside the label -- Full Name.

---

The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

The <ul> HTML element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless.

ul {
  padding: 0;
  list-style: none;
}

<address>
  <ul>
    <li>
      <h3>Address</h3>
      <p>5263 Fantasy Kebab Road, <br>Bergen, Norway, <br>55060</p>
    </li>
    <li>
      <h3>Phone</h3>
      <a href="tel:21-666-9112">21-666-9112</a>
    </li>
    <li>
      <h3>Email</h3>
      <a href="mailto:bigemail@gmail.com">bigemail@gmail.com</a>
    </li>
  </ul>
</address>

Answer 2

there are many ways of adding semantics. One way is to use html5 elements like the address element for your contact information. You can also add an anchor element with href being tel:[number] or mailto:[email]

Sometimes you have information inside that cant be expressed with html tags but you can help a search engine understand your data better by using json-ld or schema.org/microdata. That could be a recipe, pagination, organisations, people, telephone number etc.