Блок-цитата 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).