<q>
Une courte citation insérée dans une phrase. Le navigateur ajoute lui-même les guillemets.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Notre mentor nous répétait : <q>Ne copie pas du code que tu ne comprends pas</q>. Aujourd’hui, je sais qu’il avait raison.</p>Définition et utilisation
#L’élément <q> marque une courte citation au milieu d’une phrase. Le navigateur l’entoure lui-même de guillemets, donc ne les tapez pas à la main, sinon vous les verrez en double.
Les navigateurs choisissent généralement les guillemets en fonction de la langue de la page, donc avec lang="fr", vous verrez les guillemets français « … ». Vous réglez une autre forme avec la propriété CSS quotes. Vous indiquez l’adresse de la source de la citation dans l’attribut cite, même si le navigateur ne l’affiche pas.
Marquez une citation plus longue, qui occupe un bloc séparé, avec <blockquote>. N’utilisez pas non plus <q> pour l’ironie ni pour mettre en valeur des mots isolés entre guillemets, car ce ne sont pas des citations.
Syntaxe
#<q>courte citation</q>Attributs
#URL
L’adresse du document d’où provient la citation. Elle n’est pas affichée, elle sert aux scripts et aux robots. Indiquez la source visible dans le texte de la phrase.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#cite
URLL’adresse du document d’où provient la citation. Elle n’est pas affichée, elle sert aux scripts et aux robots. Indiquez la source visible dans le texte de la phrase.
<p>
La documentation de CodeWorlds le rappelle :
<q cite="https://www.codeworlds.com/fr/documentation/html/p">un paragraphe ne peut contenir que du contenu phrasant</q>.
</p>Plus d’exemples
#<p style="quotes: '“' '”';">
Les instructions disent : <q>enregistrez le fichier sous index.html</q>, puis actualisez la page.
</p>Les guillemets “…” comme ceux-ci sont courants dans les livres anglophones et germanophones. La propriété quotes prend des paires de caractères : un ouvrant et un fermant.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’ajoutez pas vos propres guillemets autour de
<q>, le navigateur le fait pour vous. - Placez les longues citations dans
<blockquote>. - Il suffit généralement de
lang="fr"sur l’élément<html>pour que le navigateur utilise les guillemets français. Vous réglez des caractères personnalisés en CSS, par exempleq { quotes: "«" "»"; }.
Entrées associées
#- <blockquote>Une citation plus longue provenant d’une autre source, affichée comme un bloc séparé et indenté.
- <cite>Le titre d’une œuvre : un livre, un article, un film, une chanson, un jeu ou un logiciel.
- <em>Un accent dans la phrase : un mot qui, à la lecture à voix haute, se prononce avec insistance.
- <i>Un texte sur un autre ton ou dans une autre voix : expressions étrangères, noms latins, pensées d’un personnage, termes techniques.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.