Правильный HTML Blockquote

Question

Как правильно отобразить блочную цитату 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>

Answer 1

На основании недавних изменений в спецификациях HTML , теперь это правильный способ обработки цитат с цитатами.

<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>

Answer 2

Я думаю, что ваша вторая форма лучше, чем ваша первая. Я не думаю, что атрибуция цитаты должна быть внутри <blockquote>.

Использование тега <b> зависит от вас, оно, вероятно, технически правильно в соответствии со спецификацией, но семантически бесполезно для всех практических целей.

С другой стороны, <br/> выглядит неправильно, кажется, трудно оправдать, что там требуется семантический разрыв строки. Если вы хотите показать название и организацию в отдельных строках, то это наглядно и должно быть сделано с помощью CSS.

Относительно того, следует ли не использовать элемент <cite>, это не будет правильным в соответствии со спецификацией HTML5, но см. 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>

Answer 3

Атрибуция для цитаты, если таковая имеется, должна быть размещена вне элемента blockquote.

- Рабочая группа W3C HTML

W3C предоставляет множество примеров различных способов присвоения блочных кавычек в этом черновике . Вы также можете прочитать эту статью в блоге , которую я прочитал, прежде чем сюда зайти. Следующий пример основан на их рекомендации:

<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 использует его выше .

Answer 4

Семантически следующее имеет смысл, используйте атрибут cite внутри элемента blockquote для цитирования определенного URL-адреса и элемент cite (встроенный) перед конечным тегом 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>

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

Иллюстративная стенография от Линды Бронсон

Помните, что цитата предназначена для длинных цитат, поэтому, хотя вышеприведенное является технически правильным, лучше было бы:

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

«Быстрая коричневая лиса перепрыгивает через ленивую собаку» Иллюстративная стенография от Линга Бронсон

Если вы хотите подчеркнуть имя автора, вы можете использовать b. Обратите внимание, что в качестве названия книги используется цитата, в данном случае Illustrative Shorthand.