Citant dans HTML: Citations, citations et blocs

Il est trop courant de voir le HTML incorrect utilisé pour les devis dans le balisage. Dans cet article, foulons tout cela, en regardant différentes situations et différentes balises HTML pour gérer ces situations.

Il y a trois principaux éléments HTML impliqués dans les citations:

Jetons un coup d'œil.

Blocquotes

Les balises BlockQuote sont utilisées pour distinguer le texte cité du reste du contenu. Mon professeur d'anglais de dixième année m'a percé dans la tête que toute citation de quatre lignes ou plus devrait être mise à part de cette façon. La spécification HTML n'a pas une telle exigence, mais tant que le texte est un devis et que vous voulez qu'il soit séparé du texte et des balises environnants, un Blockquote est le choix sémantique.

Par défaut, les navigateurs informent les blocs de blocs en ajoutant de la marge de chaque côté.

En tant qu'élément d'écoulement (élément de «niveau de bloc»), Blockquote peut contenir d'autres éléments à l'intérieur. Par exemple, nous pouvons y déposer des paragraphes sans problème:

 <lockquote>
  <p> </p>
  <p> </p>
</lockquote>

Mais il pourrait aussi être d'autres éléments, comme un titre ou une liste non ordonnée:

 <lockquote>
    <h2> </h2>
    <ul>
      <li> </li>
      <li> </li>
    </ul>
</lockquote>

Il est important de noter que BlockQuotes ne doit être utilisé que pour les citations plutôt que comme un élément décoratif dans une conception. Cela facilite également l'accessibilité car les utilisateurs du lecteur d'écran peuvent sauter entre BlockQuotes. Ainsi, un élément Blockquote utilisé uniquement pour l'esthétique pourrait vraiment confondre ces utilisateurs. Si vous avez besoin de quelque chose de plus décoratif qui tombe en dehors des limites des citations prolongées, alors peut-être qu'une div avec une classe est la voie à suivre.

 Blockquote,
.Callout-block {
  / * Ceux-ci pourraient partager le style * /
}

Citant avec q

Les balises Q () sont destinées à des citations en ligne , ou ce que mon professeur de dixième année dirait, ce sont ceux de quatre lignes. De nombreux navigateurs modernes ajouteront automatiquement des guillemets à la citation en tant qu'éléments pseudo, mais vous aurez peut-être besoin d'une solution de sauvegarde pour les navigateurs plus âgés.

Les guillemets typiques sont tout aussi valables pour les citations en ligne que l'élément . Les avantages de l'utilisation de , cependant, sont qu'il comprend un attribut CITE, une manipulation automatique des guillemets et une manipulation automatique des niveaux de devis. Les éléments ne devraient pas être utilisés pour le sarcasme (par exemple, "Vous utiliseriez une balise pour le sarcasme, n'est-ce pas?"), Ou signifier un mot avec des citations d'air (par exemple "génial" est une description "précise" de l'auteur). Mais si vous pouvez comprendre comment marquer les citations d'air, faites-le moi savoir. Parce que ce serait «génial».

L'attribut de citation

et BlockQuotes peuvent utiliser un attribut Citation (citer). Cet attribut contient une URL qui fournit un contexte et / ou une référence pour le matériel cité. La spécification est de dire que l'URL peut être entourée d'espaces. (Je ne sais pas pourquoi cela a souligné, mais si vous voulez mettre en colère les divinités du code sémantique, vous devrez faire plus que jeter des espaces.)

 <p> L'officier a laissé une note disant <q cite="https://johnrhea.com/summons"> Vous avez été convoqué pour apparaître le 4 janvier pour la tentative de lecteur. </q> </p>

Cet attribut CITE n'est pas visible par l'utilisateur par défaut. Vous pouvez l'ajouter avec une pincée de magie CSS comme la démo suivante. Vous pourriez même jouer avec cela pour faire apparaître la citation sur le plan sur le plan.

Aucune de ces options n'est particulièrement excellente. Si vous devez citer une source telle que les utilisateurs peuvent le voir et y aller, vous devriez le faire en HTML et probablement avec l'élément , que nous couvrirons ensuite.

L'élément de citation

La balise doit être utilisée pour faire référence à un travail créatif plutôt qu'à la personne qui a dit ou écrit le devis. En d'autres termes, ce n'est pas pour les citations. Voici les exemples de la spécification :

 <p> Mon livre préféré est <cite> The Reality Dysfonction </cite> par
Peter F. Hamilton. Ma bande dessinée préférée est <cite> perles avant
Swine </cite> par Stephan Pastis. Mon morceau préféré est <cite> jive
Samba </cite> par le Sextet Adderley de Cannonball. </p>

Voici un autre exemple:

Si l'auteur de cet article vous disait qu'il vous donnerait un cupcake, et que vous le par son nom , ce serait sémantiquement incorrect. Ainsi, aucun cupcakes ne changerait de mains. Si vous avez cité l'article dans lequel il vous a offert un cupcake, ce serait sémantiquement correct, mais comme l'auteur ne ferait pas cela, vous n'obtiendriez toujours pas de cupcake. Désolé.

Par défaut, les navigateurs en italique des balises CITE et il n'y a aucune exigence qu'un ou soit présent pour utiliser l'élément CITE. Si vous souhaitez citer un livre ou un autre travail créatif, giflez-le dans l'élément cite. Les divinités sémantiques vous sourire pour ne pas utiliser les éléments ou .

Mais où mettre l'élément cite? À l'intérieur? Dehors? À l'envers? Si nous le mettons à l'intérieur du ou du , nous en faisons partie de la citation. C'est interdit par la spécification pour cette raison.

 
<lockquote>
  Citation sur la distribution de cupcake d'un article
  <cite> L'article </cite>
</lockquote>

Le mettre à l'extérieur se sent mal et vous oblige également à avoir un élément entorant comme un

si vous vouliez les coiffer ensemble.

 <div>
  <lockquote>
    Citation sur la distribution de cupcake d'un article
  </lockquote>
  <cite> L'article </cite>
</div>

NB Si vous Google sur ce problème, vous pouvez rencontrer un article de médecin HTML5 de 2013 qui contredit une grande partie de ce qui est présenté ici. Cela dit, chaque fois qu'il est lié aux documents pour le soutien, les documents sont d'accord avec l'article que vous lisez actuellement plutôt que l'article HTML5 Doctor. Très probablement, les documents ont changé depuis que cet article a été écrit.

Hé, qu'en est-il de l'élément de figure?

Une façon de marquer une citation - et d'une manière qui plaît aux divinités de code sémantique - est de mettre le blockquote dans un élément de figure. Ensuite, mettez l'élément CITE et toute autre information d'auteur ou de citation dans une FigCaption.

 <figure>
  <lockquote>
    Mais les navigateurs Web ne sont pas comme des serveurs Web. Si votre code back-end devient si grand qu'il commence à s'exécuter sensiblement lentement, vous pouvez y jeter plus d'alimentation informatique en augmentant votre serveur. Ce n'est pas une option sur le frontal où vous n'avez pas vraiment <em>un</em> environnement d'exécution - vos utilisateurs finaux ont leur propre environnement d'exécution avec ses propres contraintes autour de la puissance de calcul <strong>et</strong> de la connectivité réseau.
  </lockquote>
  <figcaption>
    & mdash; Jeremy Keith, <cite> Modèles mentaux </cite>
   figCaption>
 figure></figcaption></figure>

Bien que cela double le nombre d'éléments nécessaires, il y a plusieurs avantages:

1. Il est sémantiquement correct pour les quatre éléments.
2. Il vous permet à la fois d'inclure et d'encapsuler des informations sur l'auteur au-delà de la citation du nom de l'œuvre.
3. Il vous donne un moyen facile de coiffer la citation sans recourir à des divs, des portées ou une misère.

Rien de tout cela n'est pour le dialogue

Pas ! Ce sont des modaux qui attirent l'attention. Dialogue, comme dans les échanges de conversation entre les personnes qui s'expriment ou se tapent.

Ni ni ni ne doivent être utilisés pour le dialogue et les échanges similaires entre les haut-parleurs. Si vous marquez le dialogue, vous pouvez utiliser tout ce qui est le plus logique pour vous. Il n'y a pas de moyen sémantique de le faire. Cela dit, la spécification suggère des balises

et une ponctuation avec des balises ou pour désigner le haut-parleur et les balises pour marquer les directions de la scène.

Accessibilité des citations

D'après les recherches que j'ai faites, les lecteurs d'écran ne devraient pas avoir de problème pour comprendre les balises , ou approuvées par la désintégration sémantique.

Plus de «façons» de «citer»

Vous pouvez ajouter des guillemets à un en utilisant les éléments PSS Pseudo. L'élément est livré avec des guillemets cuits afin qu'ils n'aient pas besoin d'être ajoutés, mais les ajoutant en tant que pseudo-éléments peuvent être une solution de contournement pour les navigateurs plus âgés qui ne les ajoutent pas automatiquement. Comme c'est ainsi que les navigateurs modernes ajoutent les guillemets, il n'y a aucun danger d'ajouter des citations en double. Les nouveaux navigateurs écraseront les pseudo-éléments par défaut, et les navigateurs plus anciens qui prennent en charge les éléments pseudo ajouteront les citations.

Mais vous ne pouvez pas, comme moi, supposer que ce qui précède vous donnera toujours des devis d'ouverture et de fermeture intelligents. Même si la police prend en charge les citations intelligentes, les citations droites seront parfois affichées. Pour être en sécurité, il est préférable d'utiliser la propriété CSS Citations pour améliorer l'intelligence sur ces guillemets.

 Blockquote {
  citations: """ """ "'" "'";
} 

Citation à plusieurs niveaux

Voyons maintenant les niveaux de devis. La balise ajustera automatiquement les niveaux de devis.

Disons que vous êtes dans un domaine qui utilise la convention britannique d'utiliser des devis uniques. Vous pouvez utiliser la règle des citations CSS pour mettre la première et clôturer les citations simples dans la liste. Voici un exemple des deux façons:

Il n'y a pas de limite à la nidification. Ces éléments imbriqués pourraient même être dans un blockquote dans un Blockquote.

Si vous ajoutez des guillemets à un Blockquote, sachez que le Blockquote ne modifie pas le niveau de devis comme le fait une balise . Si vous vous attendez à avoir des devis dans un Blockquote, vous voudrez peut-être ajouter une règle de sélecteur descendant pour démarrer des éléments dans un Blockquote au niveau de devis unique (ou des devis doubles si vous suivez les conventions britanniques).

 Blockquote Q {
  citations: "'" "'" """ """;
}

Le dernier niveau de devis que vous réalisez se poursuivra à travers les niveaux ultérieurs de devis. Pour utiliser la convention double, simple, double, simple…, ajoutez plus de niveaux à la propriété CSS Quotes.

 q {
  citations: """ """ "'" "'" """ """ "'" "'" """ """;
}

Ponctuation suspendue

De nombreux experts de la typographie vous diront que suspendre les guillemets sur BlockQuotes semble mieux (et ils sont corrects). La ponctuation suspendue est, dans ce cas, des guillemets qui sont repoussés du texte afin que les caractères du texte s'alignent verticalement.

Une possibilité dans CSS consiste à utiliser une valeur légèrement négative sur la propriété Text-Indent. L'indentation négative exacte variera selon la police, alors assurez-vous de doubler l'espacement avec la police que vous finissez par utiliser.

 Blockquote {
  Texte-indent: -0,45em;
}

Il existe un moyen plus agréable de gérer cela en utilisant la propriété CSS de la Punctuation suspendue. Il n'est pris en charge que dans Safari au moment de la rédaction de cet article, nous devrons donc améliorer progressivement:

 /* Retomber */
Blockquote {
  Texte-indent: -0,45em;
}

/ * S'il y a une prise en charge, effacez le retrait et utilisez la propriété à la place * /
@Supports (pending-punctuation: d'abord) {
  Blockquote {
    Texte-indent: 0;
    suspension de suspension: premier;
  }
}

L'utilisation de la punctuation suspendue est meilleure car elle est moins délicate. Cela fonctionnera juste quand cela le pourra.

Pouvons-nous animer des guillemets?

Bien sûr, nous le pouvons.

Pourquoi vous auriez besoin de le faire, je ne suis pas totalement sûr, mais les guillemets dans une balise sont ajoutés sont des éléments pseudo dans la feuille de style UA, nous pouvons donc les sélectionner et les styliser - y compris l'animation - si nous en avons besoin.

Attendez, peut-être que nous avons simplement résolu le truc des citations d'air après tout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!