正确的HTML Blockquote

时间:2011-06-17 15:32:00

标签: html5

显示HTML5区块引用的正确方法是什么?

我有以下内容:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <cite>John Doe<br/>ACME Industries</cite>
</blockquote>

但是我不确定将引用放在块引用中是否正确并且想要适当地设置它的样式但是如果我将它移出引号我需要用div包装以给出独特的样式属性。思考?感谢

同样根据:http://dev.w3.org/html5/spec/Overview.html#the-cite-element我应该使用<b>标签作为名称吗?

这是正确的吗?

<div class="testimonial">
    <blockquote>
        <p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>  
    </blockquote>
    <p><b>John Doe</b><br />ACME Industries</p>
</div>

4 个答案:

答案 0 :(得分:22)

基于recent changes in the HTML specifications,现在这是处理带引文的块引用的正确方法。

<blockquote>
    <p>Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
    <footer>
        — <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
    </footer>
</blockquote>

答案 1 :(得分:4)

我认为你的第二种形式比你的第一种形式更好。我不认为引用的归属应该在<blockquote>

<b>标签的使用取决于您,根据规范,它在技术上可能是正确的,但在所有实际用途中它在语义上都是无用的。

另一方面,<br/>看起来不对,似乎很难证明在那里调用语义行中断。如果你想在不同的行上显示名称和组织,那就是表现形式,应该用CSS完成。

关于是否不使用<cite>元素,根据HTML5规范,它是不正确的,但请参阅Jeremy Keith的http://24ways.org/2009/incite-a-riot作为替代观点。

这是非常主观的,但我可能想做一些像

这样的事情
<figure class="testimonial">
    <blockquote>
        <p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>  
    </blockquote>
    <figcaption class="attribution">
       <span class="name">John Doe</span> <span class="organisation">ACME Industries</span>
    </figcaption>
</figure>

答案 2 :(得分:0)

从语义上讲,下面有意义,使用blockquote元素中的cite属性来引用特定的URL,并在结束的blockquote标记之前使用引用元素(内联),如下所示:

<div>
<blockquote cite="http://example.com">
<p>The quick brown fox jumps over the lazy dog</p>
<cite>Illustrative Shorthand</cite> by Linda Bronson (1888)
</blockquote>
</div>

快速的棕色狐狸跳过懒狗。

说明性速记作者:Linda Bronson

请记住,blockquote是长引号,所以虽然上面的技术上是正确的,但更好的是:

<div>
<q>The quick brown fox jumps over the lazy dog</q> 
<cite>Illustrative Shorthand</cite> by Linda Bronson (1888)
</div>

“快速的棕色狐狸跳过懒狗” Illustrative Shorthand 作者Linga Bronson

如果你想强调作者的名字,你可以使用b。请注意,引用用于书籍的名称,在本例中为Illustrative Shorthand。

答案 3 :(得分:-1)

报价的归属(如果有)必须放在blockquote元素之外。

- W3C HTML工作组

W3C提供了一组在this draft中对块引用进行属性的不同方法的示例。你也可以阅读this blog article,这是我在来之前读到的。以下示例基于他们的建议:

<blockquote>
 <p>Attribution for the quotation, if any, must be placed outside the blockquote element.</p>
</blockquote>
<p>— W3C HTML Working Group</p>

他们继续使用<figure><figcaption>以@Alohci使用above的方式提供示例。