HTML5 block-цитата с автором

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

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

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

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

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

28
html html5 quote

5 ответов

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

например, использовать

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

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

11

я погуглил об этом, и это выглядит как <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

39

вот как Bootstrap делает это в v3.3.1: http://getbootstrap.com/css/#type-blockquotes

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

больше на элементе колонтитула от МДН: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

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

9

обновление 2018

HTML 5.3 редакторский проект, 9 марта 2018

W3C говорит о cite element:

элемент 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>
4

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

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