HTML and CSS Reference
In-Depth Information
Figure 15-4.
The ::after pseudo-element automatically appends the URL to the external link
Generating Quotes Automatically
HTML has two elements that are intended to mark up quotations:
<q>
and
<blockquote>
. The first one is
intended for short, inline quotations, whereas
<blockquote>
is reserved for lengthy quotations that are intended
to be set off from the surrounding text.
You shouldn't use quotation marks with
<q>
tags. The browser inserts them for you. For a long time,
browsers failed to do so, but all modern browsers (including IE 8) now insert quotation marks correctly. However,
IE 8+ uses single curly quotes, Firefox uses double curly quotes, and other browsers use double straight quotes.
The
<blockquote>
element
>
doesn't automatically add quotation marks. You need to add them yourself if
you want them.
With the help of the
quotes
property and the
::before
and
::after
pseudo-elements, you can control
the generation of quotation marks not only for
<q>
, but also for any other element. What's more, you can set up
sequences to ensure that nested quotations are marked up correctly. For example, you can follow the American
typographical practice of double quotes first, followed by single ones for nested quotations. Alternatively, you can
use the British convention of single quotes followed by double ones. Or if you're working with another language,
you can use the correct glyphs.
The
quotes
property expects a space-separated list of pairs of opening and closing quotation marks. If you
specify multiple pairs, they're used in sequence depending on how deep the quotations are nested. The browser
automatically keeps track of the level of nesting.
To generate curly quotes or other types of quotation marks, use the hexadecimal codes listed in Table
15-2
.
Table 15-2.
Hexadecimal Codes for Generating Quotation Marks
Hexadecimal Code
Mark
Description
\2018
'
Left single quotation mark
\2019
'
Right single quotation mark
\201C
“
Left double quotation mark
\201D
”
Right double quotation mark
\201E
„
Double low-9 quotation mark
\00AB
«
Left double-angle quotation mark
\00BB
»
Right double-angle quotation mark
■
The hexadecimal codes for other quotation marks can be found in the Unicode General Punctuation block
Tip
