web-dev-qa-db-fra.com

Citation de bloc HTML5 avec l'auteur

Bonjour, je vois un grand nombre de façons différentes d’implémenter blockquote en html, mais il n’apparaît pas clairement dans sa documentation comment formater correctement une blockquote disons d’une citation célèbre et rencontrer son auteur comme:

En victoire, vous méritez le Champagne, en défaite, vous en avez besoin.

Napoléon Bonaparte

Quel serait le format correct de cela en HTML5?

L'auteur doit-il être à l'intérieur ou à l'extérieur de la balise blockquote? Devrait-il être à l'intérieur de l'attribut cite? (même en sachant que la documentation spécifie un URI, pas l'auteur)

htmlhtml5quote
31
zanona

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

Par exemple, utilisez

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

La documentation HTML 5 indique: «Les petits caractères comportent généralement des renonciations, des restrictions, des restrictions légales ou des droits d’auteur. Les petits caractères sont aussi parfois utilisés pour attribuer ou pour satisfaire aux exigences en matière de licences.

11
Mat D

J'ai googlé à ce sujet et il semble que <figure> et <figcaption> devraient faire l'affaire:

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

Voici comment Bootstrap utilise quotes dans la 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>

Plus d'informations sur l'élément de pied de page de MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

L'élément HTML <footer> représente un pied de page pour son .__ le plus proche. sectionner le contenu ou l’élément racine de sectionnement (c’est-à-dire son parent le plus proche <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Un pied de page contient généralement des informations sur l'auteur de la section, les données de copyright ou des liens vers connexes documents.

Vous pouvez également envisager d'utiliser Données structurées , telles que microdonnées, RDFa et microformats.

11
skibulk

MISE À JOUR 2018

HTML 5.3 Version préliminaire de l'éditeur, 9 mars 2018

Le W3C dit à propos de l'élément cite :

L'élément cite représente une référence à un travail créatif. Il doit inclure le titre de l'œuvre ou le nom de l'auteur (personne, personnes ou organisation) ou une référence d'URL ou une référence dans. forme abrégée selon les conventions utilisées pour l’ajout de métadonnées de citation.

Donc, le code suivant c'est bon:

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

Ma préférence et ça valide ...

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

Ceci peut être couvert par 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
Yi-Ting Liu