HTML5 блок-цитата с автором - PullRequest
Новая
       1

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

34 голосов
/ 28 марта 2011

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

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

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

Что быправильный ли это формат HTML5?

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

Ответы [ 6 ]

40 голосов
/ 13 мая 2012

Я погуглил по этому поводу, и похоже, что <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

12 голосов
/ 04 декабря 2014

Вот как 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 имикроформатами.

12 голосов
/ 20 апреля 2012

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

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

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

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

8 голосов
/ 10 марта 2018

ОБНОВЛЕНИЕ 2018

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

W3C говорит о элемент цитирования :

Элемент 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>
1 голос
/ 29 марта 2011

Мои предпочтения, и это подтверждает ... 

<!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>
0 голосов
/ 25 января 2019

Это может быть покрыто 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>
...