我正在从事的项目有以下页脚：
<footer>
License: <a href="#">Creative Commons BY</a>
Email: <a href="mailto:#">email@mail.com</a>
Telephone: <a href="tel:#">0123456789</a>
</footer>
对于这个页脚，我希望每个链接（及其前缀）显示在单独的行上，并且我希望尽可能在语义上有效，而不添加不必要的标记。
我已经考虑过：
<br>标签，但它只被认为是诗歌中的语义（或类似的内容，其中换行符是信息的固有部分，所以我不能用它来换行（见这个问题：<br>标签语义替代用法）
使用 an ul，但它并不是一个真正的列表，因此将它包装在 anul中也不是一个有效的选项。
使用固定宽度，但我真的很想找到一个动态的解决方案。
用 包围每一行<p>，这似乎有点过头了，因为它不是真正的段落，而是我要包装的单行。
在不添加额外标记的情况下，以语义合理的方式打破这些行的最佳方法是什么？
我认为这是一个列表。然后<ul>标签可以是适当的。
也许更好的是，您可以将其视为定义列表，然后<dl><dt>是合适的。
例子：
<dl>
<dt>License:</dt>
<dd><a href="#">Creative Commons BY</a></dd>
etc.
</dl>
要将它放在单独的行上，只需将 dts 设置为float:left.
[...] 语义上合理的方式，而不添加额外的标记？
我怀疑你可以。我个人会为此使用定义列表。
<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/1/以了解另一种样式。
谈论语义， <address>如果提供的联系信息与文档相关，这可能是一个很好的用例（我可能认为，因为我看到了包含1的许可证信息）：请参阅http://html5doctor.com/the-address-element /以供进一步参考。
（如果没有，html5doctor 上的同一页面建议在必要的地方简单地使用带有hcard 微格式<br>的段落）
所以在第一种情况下，我会选择
<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
(1) 编辑——正如@unor 所指出的，信息许可证可能应该保留在address元素之外，所以我将它包装在一个段落中。
因此，如果不按您的要求添加额外的标记，则只有一种解决方案，对链接元素使用伪元素并将其设置为块元素：
footer a:after {
content: "";
display: block;
}
但对我来说，这不是很语义化，因为你应该包装内容是别的东西。
我在语义上将其视为 <dl>。
使用 CSS 你可能会解决这个问题：
footer > a:before{
content: "<br/>"
}