Блок-цитата HTML5 с автором

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

В победе вы заслуживаете Шампанское, в поражении вам это нужно.

Наполеон Бонапарт

Каков будет правильный формат этого HTML5?

Если автор находится внутри или вне тега blockquote? Должно ли оно находиться внутри атрибута cite? (даже зная, что документация указывает URI, а не автор)

Ответ 1

http://neilpie.co.uk/2011/12/13/html5-quote-attribution/

Например, используйте

<small class="author">Napoleon Bonaparte<small>

Документация на HTML 5 гласит: "В малом принтере обычно указаны отказы, оговорки, юридические ограничения или авторские права. Малая печать также иногда используется для атрибуции или для удовлетворения требований лицензирования".

Ответ 2

Я об этом заглянул в googled, и похоже, что <figure> и <figcaption> должны выполнить задание:

<figure>
  <blockquote cite="https://developer.mozilla.org/samples/html/figure.html">
    Quotes, parts of poems can also be a part of figure.
  </blockquote>
  <figcaption>MDN editors</figcaption>
</figure>

https://developer.mozilla.org/samples/html/figure.html

<figure>
  <blockquote cite="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element">
    The figure element represents some flow content, optionally with a caption,
    that is self-contained and is typically referenced as a single unit from the
    main flow of the document.
  </blockquote>
  <figcaption>asdf</figcaption>
</figure>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element

Ответ 3

Вот как Bootstrap делает кавычки в v3.3.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Подробнее об элементе нижнего колонтитула из MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

Элемент HTML <footer> представляет нижний колонтитул для ближайшего содержимого секционирования или корневого элемента секционирования (т.е. Его ближайшего родителя <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Нижний колонтитул обычно содержит информацию об авторе раздела, данные об авторских правах или ссылки на соответствующие документы.

Вы также можете рассмотреть возможность использования структурированных данных, таких как микроданные, RDFa и микроформаты.

Ответ 4

ОБНОВЛЕНИЕ 2018

Проект редакции HTML 5.3, 9 марта 2018 г.

W3C говорит об элементе cite:

Элемент cite представляет собой ссылку на творческое произведение. Он должен включать название произведения или имя автора (человека, человека или организации) или ссылку на URL, или ссылку в сокращенной форме в соответствии с соглашениями, используемыми для добавления метаданных цитирования.

Так что следующий код это нормально:

<blockquote>
    Those who pass by us, do not go alone, and do not leave us alone; 
    they leave a bit of themselves, and take a little of us.
    <cite>Antoine de Saint-Exupéry</cite>
</blockquote>

Ответ 5

Мои предпочтения и он проверяет...

<!doctype html>
<html lang="en">
<head><title>Blockquote Test</title></head>
<body>

<div style="width:300px;border:1px solid #cecece; padding:10px;">

<blockquote cite="URL">
In victory, you deserve Champagne, in defeat, you need it.
</blockquote>
<div class="credit" style="text-align:right;">
<cite><a href="URL">Napoleon Bonaparte</a></cite>
</div>

</div>

</body>
</html>

Ответ 6

Это может быть покрыто элементом Bootstrap 4 <footer class="blockquote-footer">:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<blockquote class="blockquote">
  <p>In the digital age, knowledge is our lifeblood. And documents are the DNA of knowledge.</p>
  <footer class="blockquote-footer">Rick Thoman, CEO, <cite title="Xerox Corporation">Xerox</cite></footer>
</blockquote>

Ответ 7

У меня недостаточно репутации, чтобы ответить на ответ @SandroMarques.

Просто хочу отметить, что здесь нельзя использовать <cite>.

A citation is not a quote (for which the q element is appropriate).