HTML 标签 <div></div> 的替换示例

Question

我正在做一个项目，我正在创建一个“联系我们”部分，其中包括一般信息，如地址、Gmail、电话号码，而另一部分是实际表格您可以在其中输入信息。我倾向于大量依赖“div”标签，即使它不是语义的。我想清理我的代码，以及如何用更多语义标签替换尽可能多的 div。我试图搜索标签以某种方式替换我拥有的 divs，但找不到我可以替换它们的标签。

这是某些上下文的页脚屏幕截图 https://imgur.com/9W45JU5

        <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

添加语义的方法有很多种。一种方法是使用 html5 元素，例如 address element for your contact information. You can also add an anchor element，其中 href 为 tel:[number] 或 mailto:[email]

有时您的内部信息无法用 html 标签表达，但您可以使用 json-ld or schema.org/microdata 帮助搜索引擎更好地理解您的数据。这可能是食谱、分页、组织、人员、电话号码等。

Answer 2

你绝对应该用 labels 替换包裹 inputs 的 div。

没有标签，这就是您的输入字段在屏幕上的显示方式 reader（在这些示例中，我使用的是画外音）。请注意，输入没有被描述为全名，或者任何对用户有意义的内容，以便用户了解应该输入此输入的内容。

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>

使用标签元素，屏幕 reader 可以通过标签内的文本描述字段 -- 全名.

<address> HTML element 表示随附的 HTML 提供个人或组织的联系信息。

<ul> HTML element用于对没有数字顺序的项目集合进行分组，它们在列表中的顺序是没有意义的。

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>

HTML 标签 <div></div> 的替换示例

Example of replacements for HTML tag <div></div>

html

accessibility

semantic-html