【问题标题】:Semantic HTML markup for FAQs [closed]常见问题的语义 HTML 标记 [关闭]
【发布时间】:2010-10-05 13:27:17
【问题描述】:

我想建立一个问答页面。

这不是一个列表,也不是表格数据,我不确定是否或如何使用<dl><dt><dd>

构建它并使用 css 格式化它的最佳语义方式是什么?

【问题讨论】:

  • 关于语义的令人沮丧的事情之一是,有时没有正确或错误的答案。 <dl> 是合适的(感谢它的new meaning in HTML5),标题和段落也很好用,如果您有太多问题并希望保持整洁,您也可以使用<details>/<summary> 制作折叠常见问题解答。

标签: html css markup semantics


【解决方案1】:

我总是使用

来解答常见问题。通常使
成为要链接的问题索引的锚点。

编辑...

我应该提一下,这是我对最语义化方法的解释。在我看来,这正是

所要标记的东西。

至于 CSS,它真的很主观。我为

做典型的标题风格,字体粗细,字体大小可能略高,字母/单词间距可能更大。

只要能与网站上的其他视觉效果很好地结合在一起,并使问题和答案之间的关系立即显而易见......

【讨论】:

    【解决方案2】:

    我会选择最简单的模型;每个问题都是一个标题,在段落标签中有答案。我认为清晰、合乎逻辑且语义清晰。

    我不使用提到的定义列表标签的原因是,从纯语义的角度来看,我认为问题和答案不符合纯术语和定义的模式。

    【讨论】:

    • 2007 年 24ways 的一篇文章讨论了深度学习的语义使用。它设法避免了这种特定情况,但仍然具有相关性。 24ways.org/2007/my-other-christmas-present-is-a-definition-list
    • 有趣的阅读,一个有趣的网站;感谢您的链接。
    • 使用定义列表可能发生的最坏情况(严肃的问题)是什么?谷歌会感到困惑/屏幕阅读器会感到困惑吗?我意识到这不是一个完美的匹配,但我没有看到更好的选择
    • 定义列表现在有了新的作用,这要归功于 HTML5:它们被称为“描述”列表,并且可以用于任何名称/值组合。 html5doctor.com/the-dl-element
    猜你喜欢
    • 2015-10-11
    • 2010-09-09
    • 1970-01-01
    • 2012-11-25
    • 2011-01-25
    • 2011-10-01
    • 1970-01-01
    • 2012-10-25
    • 1970-01-01
    相关资源
    最近更新 更多