<q> Quote Tag Examples
Examples of the q
tag in HTML 5
Examples of the <q> tag
(see <q> tag demo above)
<p>This paragraph follows the <q>practice what you preach</q> principle. The double quotation marks around the quotation in the previous sentence are created by the browser interpreting the <q> tag rather than by actual double quotation marks in the HTML code.</p>
The <
and >
character entities on the last line escapes that instance of the <q>
tag so that it appears literally in that sentence rather than as the HTML code for a start tag with no matching end tag.
The cite
attribute provides a link to the source of the quotation. The HTML 5 specification says that User agents should allow users to follow such citation links
using the URL in the cite attribute. At this point, however, none of the browsers actually do..
<q> with <cite> tag for quote citation
<p>Per <a href="http://www.HTML-5.com/css/css-styles/#html-color-picker"> <cite>HTML Color Picker</cite></a>, <q cite="http://www.HTML-5.com/css/css-styles/#html-color-picker">In a browser that does not yet support the HTML <input type="range"/> for a slider bar control, [HTML slider bar] controls will appear as text input fields.</q></p>
Note that the content of the cite element is the title of the source of the quotation, while the value of the <q cite> attribute is a URL or other URI reference. In this case, an <a href> tag is used to create a link to the source of the quotation. The same URL is used in the <a href> attribute, the target of the link which will be visible, and the <q cite> attribute, which will not be displayed.