q
No, take a second look: lower case q, not Q. This article is (mostly) not about James Bond and the Quartermaster of the Q Branch of the British Secret Service. It is (mostly) about an HTML element which I have never used up until right here and now: the <q>
<q> indicates that an enclosed text passage is a short inline quotation. This element is intended for short quotations that do not require paragraph breaks. For long quotations one may use the <blockquote> element.
Now, this is something I often do: write inline memo comments to myself for when I no longer remember what it was all about or from where I had some information. In HTML the code will look like this:
<p>Blah blah blah.</p><!-- https://en.wikipedia.org/wiki/Q_(James_Bond) --><p>Fig. Desmond Llewelyn will forever spring to mind as the de facto personification of Q in a James Bond film.</p>No more of that, me thinks. From now on I will do it this way:
<p>Fig. Desmond Llewelyn will forever spring to mind as the de facto personification of <q cite="https://en.wikipedia.org/wiki/Q_(James_Bond)">Q</q> in a James Bond film.</p>Out of the box, in modern browsers, <q> will automatically add quotation marks around text inside the element. A style rule may be needed to add quotation marks in older browsers. If you are like me, however, you may want to hide the fact that it is a quote.
CSS to the resque:
q::before, q::after { content: ""; }With pseudo-elements added, like with James Bond, it all becomes sort of a secret. Hidden but useful if you know where to look for it. Which is something most users will not do, of course, but may happen upon if the web page is read out with a screenreader.
The caption to the photograph below uses the element to full effect. Though maybe not as effectual as many of Q’s inventions.
Fig. Desmond Llewelyn will forever spring to mind as the de facto personification of Q
in a James Bond film.