如何将HTML联系我们板块的非语义div标签替换为合适的语义化标签？

各div对应的语义化标签替换方案 #

• class="content"（联系板块介绍头部）：替换为 <header>，属于当前<section class="contact">的介绍性内容区，完全匹配header标签的语义定义。
• class="container"（布局容器，仅用于拆分联系信息和表单两栏布局）：无对应专属语义标签，可保留<div>，纯布局场景使用div不属于非语义化滥用。
• class="contactInfo"（联系信息集合区）：替换为 <address>，这是HTML专门为展示联系信息（地址、电话、邮箱等）定义的原生语义标签，可访问性适配性最优。
• class="box"（单个联系信息项，共3个）：先给三个联系项外层新增<ul>标签，每个box替换为<li>，三个联系项属于并列关系的列表内容，语义更清晰。
• class="icon"（图标容器）：仅为装饰性图标载体，无特殊语义，可保留<div>，也可以直接去掉外层容器，给Font Awesome的<i>标签加样式即可，减少冗余标签。
• class="text"（联系信息文本容器）：仅为分组标题和内容，无专属语义标签，可保留<div>。
• 表单内的class="inputBox"（输入项容器）：仅为布局分组输入框和提示文字，可保留<div>，但建议把内部的<span>替换为带for属性的<label>，和对应输入框绑定，大幅提升可访问性。

优化后的完整代码 #

<footer>
    <section class="contact">
        <!-- 原div.content替换为header -->
        <header class="content">
            <h2>联系我们</h2>
            <p>
                如果您想联系我们或者有任何问题咨询，随时可以通过下方表单给我们发送消息！
            </p>
        </header>
        <!-- 纯布局容器保留div -->
        <div class="container">
            <!-- 原div.contactInfo替换为address -->
            <address class="contactInfo">
                <!-- 新增ul包裹三个联系项 -->
                <ul>
                    <!-- 原div.box替换为li -->
                    <li class="box">
                        <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
                        <div class="text">
                            <h3>地址</h3>
                            <p>挪威卑尔根幻想烤肉串路5263号<br>邮编55060</p>
                        </div>
                    </li>
                    <li class="box">
                        <div class="icon"><i class="fas fa-phone"></i></div>
                        <div class="text">
                            <h3>电话</h3>
                            <!-- 电话加tel协议链接，语义更明确 -->
                            <p><a href="tel:216669112">21-666-9112</a></p>
                        </div>
                    </li>
                    <li class="box">
                        <div class="icon"><i class="far fa-envelope"></i></div>
                        <div class="text">
                            <h3>邮箱</h3>
                            <!-- 邮箱加mailto协议链接，语义更明确 -->
                            <p><a href="mailto:bigemail@gmail.com">bigemail@gmail.com</a></p>
                        </div>
                    </li>
                </ul>
            </address>

            <form class="contactForm">
                <h2>发送消息</h2>
                <!-- 输入框容器保留div，优化label关联 -->
                <div class="inputBox">
                    <input type="text" id="full_name" name="full_name" required="required">
                    <label for="full_name">姓名</label>
                </div>
                <div class="inputBox">
                    <input type="email" id="email" name="email" required="required">
                    <label for="email">邮箱</label>
                </div>
                <div class="inputBox">
                    <textarea id="message" required="required"></textarea>
                    <label for="message">输入您的消息...</label>
                </div>
                <div class="inputBox">
                    <input type="submit" name="submit_button" value="发送">
                </div>
            </form>
        </div>
    </section>
</footer>

内容的提问来源于stack exchange，提问作者Roald Andre Kvarv