时间戳

首页 > 解决方案 > HTML 标记的替换示例

html - HTML 标记的替换示例

问题描述

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

这是某些上下文的页脚屏幕截图 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>

标签： htmlaccessibilitysemantic-html

解决方案

您绝对应该input用 s 替换包装您的 s的 div label。

如果没有标签，这就是屏幕阅读器读取输入字段的方式（在这些示例中，我使用的是旁白）。注意输入是如何没有被描述为Full Name的，或者任何对用户有意义的东西都没有被描述为这个输入应该进入什么。

没有标签的输入字段的画外音截图

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>

使用标签元素，屏幕阅读器可以通过标签内的文本来描述字段——全名。

带标签的输入字段的画外音屏幕截图

<address>HTML 元素指示包含的 HTML 提供了一个或多个人或一个组织的联系信息。

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

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>

推荐阅读