名片的语义HTML

Question

我正在尝试为名片编写语义HTML。我想在标记上显示姓名，标题，电子邮件和电话号码。

<div id="bussinesscardcontainer">
         <section class="Details">
               <span> Name :ABC</span>
               <span> Title:XYZ </span>
           </section>
      <footer class="contact">
            <span class="email"> Email:abc@abc.com</span>
            <span class="phonenumber">Mobile:123-123-123</span>
        </footer>
 </div>

我只是想了解我的标记在语义上是否正确。

这种标记最终看起来 很难使用CSS设计名片

Answer 1

您对sectionandfooter元素的使用不正确。这两行应该\xe2\x80\x99t 形成一个部分，并且footer将属于父部分（可能是整个文档），而不仅仅是名片。
\n如果您需要分段内容元素（取决于上下文），它应该包裹整个名片。看来您在这里根本不需要footer( 或) 。header

\n\n

对于实际内容，您可以使用dl元素，因为您的卡片由名称/值对组成。

\n\n

电子邮件地址和电话号码可以成为具有该a元素的超链接。

\n\n

所以这给了你：

\n\n

<dl class="business-card">\n  <dt>Name</dt>\n  <dd>ABC</dd>\n\n  <dt>Title</dt>\n  <dd>XYZ</dd>\n\n  <dt>Email</dt>\n  <dd><a href="mailto:abc@abc.com">abc@abc.com</a></dd>\n\n  <dt>Mobile</dt>\n  <dd><a href="tel:123123123">123-123-123</a></dd>\n</dl>\n

\n

Answer 2

您的标记在技术上是正确的，但主观上可以改进。

HTML5 规范添加了许多更具描述性的 HTML 属性，例如<footer>您正在使用的属性，但将实现留给 Web 开发人员。根据我的经验，这导致 HTML 属性的使用效果不佳。

对于文档的结构组件，我发现的最好的指南是由HTML5Doctor制作的，它为您提供了这些属性的使用指南的流程图。

在您的具体情况下，我可能会省略使用<footer>并切换您的使用方式，<section>如下<div>所示：

<section class="businesscard-container">
  <div class="businesscard-details">
    <span> Name :ABC</span>
    <span> Title:XYZ </span>
  </div>
  <div class="businesscard-contact">
    <span class="email"> Email:abc@abc.com</span>
    <span class="phonenumber">Mobile:123-123-123</span>
  </div>
</section>