打破这些界限的语义正确方法是什么？答案

【问题标题】：What is the semantically correct way to break these lines?打破这些界限的语义正确方法是什么？
【发布时间】：2013-04-11 20:07:18
【问题描述】：

我正在处理的项目有以下页脚：

<footer>
  License: <a href="#">Creative Commons BY</a>
  Email: <a href="mailto:#">email@mail.com</a>
  Telephone: <a href="tel:#">0123456789</a>
</footer>

对于这个页脚，我希望每个链接（及其前缀）都显示在单独的行上，并且我希望尽可能在语义上有效，而不添加不必要的标记。

我已经考虑过了：

  标记，但它仅在诗歌中被视为语义（或类似的内容，其中换行符是信息的固有部分，所以我不能用它来换行（见这个问题: tag semantic alternative usage)
使用ul，但它并不是一个真正的列表，因此将其包装在ul 中也不是一个真正有效的选项。
使用固定宽度，但我真的很想找到动态解决方案。
用包围每一行，这似乎有点过头了，因为它不是真正的段落，而是我要换行的单行。

在不添加额外标记的情况下，以语义合理的方式打破这些行的最佳方法是什么？

【问题讨论】：

嗯，这是一个列表，所以
我认为“无额外标记”的要求有点矫枉过正。您的标记没有任何语义，如果不添加一些语义混杂，您就无法使其成为语义。我认为，一些微格式是这里的方法。看看这个 SO 问题：stackoverflow.com/questions/2359440/…
@shakurov，为什么我的标记不是语义的？我看到你在文章中建议使用<address>，但是许可证信息呢？
@shakurov，也许我应该说没有额外的 unsemantic 标记。
是的，它会的。不过，不建议这样做。更多信息here.

标签： html css semantic-markup

【解决方案1】：

我认为这是一个列表。然后<ul> 标签可能是合适的。

也许您可以将其视为定义列表，这样会更好，那么<dl><dt> 是合适的。

例子：

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    etc.
</dl>

要将它放在单独的行中，只需将 dts 设置为 float:left。

【讨论】：

【解决方案2】：

[...] 语义合理的方式，无需添加额外的标记？

我怀疑你能做到。我个人会为此使用定义列表。

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    <dt>Email:</dt>
    <dd><a href="mailto:#">email@mail.com</a></dd>
    <dt>Telephone:</dt>
    <dd><a href="tel:#">0123456789</a></dd>
</dl>

例如，要使它们显示为三行，您可以将 DT 元素向左浮动。

dt {
    float: left;
    margin-right: 4px;
}

http://jsfiddle.net/2nbfg/的演示

这样做的好处是您在以后设计样式时获得了更大的灵活性。查看http://jsfiddle.net/2nbfg/1/ 了解另一种样式。

更多信息请参见http://www.maxdesign.com.au/articles/definition/。

【讨论】：

【解决方案3】：

谈到语义，如果提供的联系信息与文档相关，这对于<address> 来说可能是一个很好的用例（我可能猜想，因为我看到了包含的许可信息¹）：请参阅http://html5doctor.com/the-address-element/ 供进一步参考。

（如果没有，html5doctor 上的同一页面建议在必要时使用  简单地使用带有hcard microformat 的段落）

所以在第一种情况下我会选择

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

和

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

参见 jsbin 示例：http://jsbin.com/ajohur/1/edit

⁽¹⁾Edit — 正如@unor 所指出的，信息许可证可能应该保留在address 元素之外，所以我将它包装在一个段落中。

【讨论】：

许可证信息不应是address 的一部分，它可能仅包含页面相应的联系信息。父 article.
因为地址可能包含指向文档作者的链接，我认为它也可能包含指向文档许可证的链接，无论如何您的这个字段是一个很好的观点。
对于许可声明，您可以使用small element（而不是p，或者如果需要包含块元素，div>small）。我仍然会使用dl 作为联系方式（或者使用 2 个div 元素）。另一种可能性是对所有内容使用一个dl，并在此列表中添加两个address 元素。

【解决方案4】：

所以，不添加额外的标记如你所问，只有一种解决方案，对链接元素使用伪元素并将其设置为块元素：

footer a:after {
  content: "";
  display: block;
}

但对我来说，这不是很语义化，因为您应该将内容包装起来。

【讨论】：

【解决方案5】：

我在语义上将其视为

。

【讨论】：

【解决方案6】：

使用 CSS 你或许可以解决这个问题：

footer > a:before{
  content: "<br/>"
}

【讨论】：

您不能通过 content 属性注入标记。最多你可以把 写成文本