html - 打破这些界限的语义正确方法是什么?

标签 html css semantic-markup

我正在处理的元素有以下页脚:

<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> tag semantic alternative usage )

  • 使用 ul ,但它并不是真正的列表,因此将它包装在 ul 中也不是真正有效的选项。

  • 使用固定宽度,但我真的很想找到一个动态解决方案。

  • <p> 包围每一行,这似乎有点过头了,因为它不是真正的段落,而是我包装的单行。

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

最佳答案

我将其视为一个列表。 然后是 <ul>标签可以是适当的。

也许您可以将其视为一个定义列表,然后 <dl><dt> 会更好是合适的。

例子:

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

要将它放在不同的行上,只需将 dts 设置为 float:left .

关于html - 打破这些界限的语义正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15946261/

相关文章:

javascript - 如何在 HTML 和 CSS 中将鼠标悬停在另一个图像中的一个点上时显示 GIF 图像?

html - IE 和 Firefox 中的按钮大小不相等

html - 当宽度小于 X 像素时更改布局

javascript - Fancybox 在页面中途加载

javascript - Bootstrap Collapse show.bs.collapse 第二次不工作

javascript - 使用 z-index 更改类

jquery - 调整图像容器不缩放

html - "semantic HTML"哪个更适合错误信息?

html - 网店中的产品名称,h2 还是强标签?

css - 仅包含图像的语义菜单