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>

我只想了解我的标记是否正确。

这个标记最终会看起来像 Difficulty in Designing Business card using CSS

Answer 1

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

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>

Answer 2

HTML没有用于此目的的语义。你有tu使用微格式（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

3 个答案: