【问题标题】:Semantically Correct Blockquote语义正确的块引用
【发布时间】:2016-02-25 21:21:58
【问题描述】:

我有 3 份推荐信将用于我正在开发的网站中。我已经阅读了块引用,我相信这是最适合他们的标签。

这是我在论坛上找到的基本块引用:

<blockquote>
      <p>Pellensque.</p>
      <p>Pellentesque.</p>
      <p class="credit"><cite>Name</cite>, Title</p>  
</blockquote>

使用 cite 标签来说明一个人的姓名和头衔在语义上是否正确?

我读到它的预期用途是指向引用的原始 URL 源。

另外,在检查某个网站的 html 时,我发现其中一个使用 h3 作为引用,使用 h6 作为名称和标题。这符合最佳实践吗?

还是纯粹在 CSS 中使用线宽和其他属性来调整文本更好?

【问题讨论】:

    标签: css html quote blockquote


    【解决方案1】:

    我读到它的预期用途是指向引用的原始 URL 源。

    这将是&lt;blockquote&gt; 元素的cite 属性。请参阅 HTML5 规范中的 here。您正在查看的是&lt;cite&gt; element,它适合标记引文的标题或作者(如图所示)。

    另外,在检查某个网站的 html 时,我发现其中一个使用 h3 作为引用,使用 h6 作为名称和标题。这符合最佳做法吗?

    如果标题是引用的一部分,那么用相应的 h 元素标记这些标题就可以了,因为您正在按原样复制标题。但是,引文不是标题,因此使用标题来标记引文是不合适的。

    除此之外,&lt;blockquote&gt; 元素是标记推荐的理想选择。

    【讨论】:

    • 哦,有道理,谢谢!您是否知道对引用的文本和名称 + 标题使用标题标签是否会在语义上有益(不仅仅是在 CSS 中设置样式)?
    • @Edson:不,因为引文不是标题。
    • 啊哈!我什至没有想到这一点。有时,只需要记住基础知识。谢谢!
    • 我会写下我的区块引用并将其发布在此处以获取潜在反馈。
    【解决方案2】:

    最后我使用了这个 HTML 标记。

            <figure class="rocking-quote">
                <blockquote>
                    <p></p>
                </blockquote>
                <figcaption>Name, Position</figcaption>
            </figure>
    

    这是我发现真正有帮助的 AListApart 文章的链接:

    http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required

    这就是 WHATWG “引用”元素 Living Standard 对“引用”元素的看法。

    https://html.spec.whatwg.org/multipage/semantics.html#the-cite-element

    我从这些来源中得到的基本上是 cite 元素必须代表作品的标题,而作者的名字不能作为一个。

    另外,我不能只在块引用之后使用“p”标签来引用作者,因为“p”标签中包含的内容在语义上没有任何东西可以让机器知道它们是相关的。

    因此,结果是一个带有“quote”类的包装图形标签,表示图形的类型,以及一个相应的“figcaption”标签,允许使用作者的姓名和职位(工作)为图形添加标题。

    如果有人有任何建议或想法,请分享。

    【讨论】:

    • 来自MDN:“值得注意的是,W3C 规范规定,对创意作品的引用,包括在 &lt;cite&gt; 元素中,可能包括作品作者的姓名. 但是,&lt;cite&gt; 的 WHATWG 规范却说相反:在任何情况下都不得包含人名。“如此矛盾的建议,像往常一样。
    猜你喜欢
    • 1970-01-01
    • 2013-09-14
    • 1970-01-01
    • 1970-01-01
    • 2019-06-02
    • 2012-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多