发表新帖
发表新帖

HTML5 block-quote with author

后端 未结
关注
6 1510
名媛妹妹
名媛妹妹 2021-01-31 02:15

Hi I\'m seeing a great number of different ways to implementat blockquote in html but it doesn\'t seem clear in its documentation how should I properly format a

相关标签:
6条回答
  • 迷失自我
    2021-01-31 02:52

    I googled about this and it looks like <figure> and <figcaption> should do the job:

    <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

    0 讨论(0)
  • 悲&欢浪女
    2021-01-31 03:00

    This is how Bootstrap does quotes in 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>

    More on the footer element from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

    The HTML <footer> Element represents a footer for its nearest sectioning content or sectioning root element (i.e, its nearest parent <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). A footer typically contains information about the author of the section, copyright data or links to related documents.

    You may also consider using Structured Data, such as microdata, RDFa, and microformats.

    0 讨论(0)
  • 北荒
    2021-01-31 03:08

    UPDATE 2020

    WHATWG says about the blockquote element

    Attribution for the quotation, if any, must be placed outside the blockquote element.

    WHATWG says about the cite element

    The cite element represents the title of a work (e.g. a book, a paper, [...])

    A person's name is not the title of a work [...] and the element must therefore not be used to mark up people's names.

    So the following HTML it's fine:

    <blockquote>
 <p>In victory, you deserve Champagne, in defeat, you need it.</p>
</blockquote>
<p>— Napoleon Bonaparte</p>

    UPDATE 2018

    HTML 5.3 Editor’s Draft, 9 March 2018

    W3C says about the cite element:

    The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata.

    So the following HTML it's fine:

    <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>
    0 讨论(0)
  • 太阳男子
    2021-01-31 03:10

    This can be covered by Bootstrap 4 <footer class="blockquote-footer"> element:

    <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 讨论(0)
  • 眼角桃花
    2021-01-31 03:14

    My preference and it validates...

    <!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 讨论(0)
  • 猫巷女王i
    2021-01-31 03:15

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

    For example, use

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

    HTML 5 documentation says, "Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements."

    0 讨论(0)
 看不清?
提交回复
热议问题