信息发布→ 登录 注册 退出

HTML5布局中address标签怎么用_联系信息区域的语义化标记说明【介绍】

发布时间:2026-01-10

点击量:
仅用于标记当前页面或article的作者/拥有者联系信息,不可用于营业地址等;无默认样式,需手动设置;误用会损害可访问性。

  • 独立作品页(如 )底部的署名与电话
  • 注意:它不适用于营业地址、门店位置、快递收货地址——那些该用普通段落或 + ARIA 标注。

    Email: author@example.com 会自动换行和缩进吗?

    不会。HTML5 已移除所有默认样式,webmaster@company.com 在现代浏览器中默认无 margin、无斜体、无换行。它的语义纯靠标签本身传达,视觉样式需手动加:

    address {
      font-style: normal;
      margin-top: 1em;
      padding-left: 1em;
      border-left: 2px solid #ccc;
    }

    如果你依赖默认斜体,那是旧浏览器遗留行为,不可靠;也不建议靠斜体来表达「这是联系信息」——语义和样式必须分离。

    常见误用:哪些情况绝对不能用?

    以下全是反例,用了反而降低可访问性:

    • 产品页面里的「发货地:杭州市西湖区」→ 属于业务属性,用 或带
    • 联系页中的「客服热线:400-xxx-xxxx」→ 这是服务入口,不是页面作者信息,应使用 或结构化

    • 嵌套在 aria-label 里但写的是第三方合作方地址 → 必须指向本页责任人,跨主体即语义错误
    • 里面放
      是纯联系信息容器,不含标题语义,标题应放在外层
    • 最易被忽略的一点:一个页面可以有多个

      ,但每个都必须对应其最近的祖先 或整个页面的作者。父子关系断了,语义就失效了。

    标签:# html5  # 的是  # 这是  # margin  # href  # 邮箱  # ai  # 浏览器  # html  # 换行  # 如果你  # 也不  # 杭州市  # 西湖  # 放在  # 那是  # 本页  
    在线客服
    服务热线

    服务热线

    4008888355

    微信咨询
    二维码
    返回顶部
    ×二维码

    截屏,微信识别二维码

    打开微信

    微信号已复制,请打开微信添加咨询详情!