名片的语义 HTML

Question

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

<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>

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

这个标记最终看起来像

Answer 1

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

HTML5 规范添加了许多更具描述性的 HTML 属性，例如您正在使用的 <footer>，但将实现留给了网络开发人员。根据我的经验，这导致 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>

Answer 2

HTML 没有用于此目的的语义。您必须使用微格式 (http://microformats.org/)。此标准适用于名片、地址、食谱等。

被搜索引擎、浏览器等使用。

h-card 是您需要的 html 微格式标准 (http://microformats.org/wiki/h-card)。一个例子：

<p class="h-card">
  <img class="u-photo" src="http://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, 
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>

Answer 3

您对 section 和 footer 元素的使用不正确。这两行不应构成一个部分，footer 将属于父部分（可能是整个文档），而不仅仅是名片。
如果您需要一个分段内容元素（这取决于上下文），它应该包裹整个名片。看来你根本不需要footer（或header）。

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

电子邮件地址 and the telephone number 可以成为带有 a 元素的超链接。

所以这给你：

<dl class="business-card">
  <dt>Name</dt>
  <dd>ABC</dd>

  <dt>Title</dt>
  <dd>XYZ</dd>

  <dt>Email</dt>
  <dd><a href="mailto:abc@abc.com">abc@abc.com</a></dd>

  <dt>Mobile</dt>
  <dd><a href="tel:123123123">123-123-123</a></dd>
</dl>

名片的语义 HTML

Semantic HTML for a business card

html

semantic-markup