web-dev-qa-db-ja.com

作者によるHTML5ブロック引用

こんにちはhtmlにblockquoteを実装するさまざまな方法がたくさんありますが、そのドキュメントではblockquoteを適切にフォーマットする方法を明確にしていないようです言いましょう有名な引用の引用とその作者のような記述：

勝利するとシャンパーニュに値し、敗北するとそれが必要になります。

ナポレオン・ボナパルト

HTML5の正しい形式は何でしょうか？

作成者はblockquoteタグの内側または外側のどちらにいますか？ cite属性内にある必要がありますか？ （ドキュメントが作成者ではなくURIを指定していることを知っていても）

htmlquote
38
zanona

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

たとえば、

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

HTML 5のドキュメントには、「通常、小さな印刷物は免責事項、警告、法的制限、または著作権を備えています。小さな印刷物は、帰属表示やライセンス要件を満たすために使用されることもあります。」

14
Mat D

私はこれについてググったところ、<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

44
iGEL

これが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>）のフッターを表します。通常、フッターには、セクションの作成者に関する情報、著作権データ、または関連ドキュメントへのリンクが含まれています。

また、microdata、RDFa、microformatsなどの 構造化データ の使用を検討することもできます。

15
skibulk

UPDATE 2018

HTML 5.3 Editor's Draft、2018年3月9日

W3Cは 引用要素 について述べています：

Cite要素は、創造的な作品への参照を表します。作品のtitleまたは著者（人物、人、組織）のnameまたは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>
10
SandroMarques

私の好みとそれが検証します...

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

これは、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>
0
Penny Liu