The Q Tag Examples

Place Short Quotations in Your HTML with the Q Tag

Return to the Q Tag Article
Return to the Q Tag Description

Standard Inline Quote

Mark said, Yeargh! It's Talk-Like-a-Pirate Day. Ahoy, Maytey!.

<p>Mark said, <q>Yeargh! It's <q>Talk-Like-a-Pirate Day.</q> Ahoy, Maytey!</q>.</p>

Return to the Q Tag Article
Return to the Q Tag Description

Set Up Different Quotes

Mark said, Yeargh! It's Talk-Like-a-Pirate Day. Ahoy, Maytey!

<p>Mark said, <q>Yeargh! It's <q>Talk-Like-a-Pirate Day.</q> Ahoy, Maytey!</q>.</p>

q { quotes: '\AB' '\BB' '‹' '›'; }
q:before { content: open-quote; }
q:after { content: close-quote; }

Return to the Q Tag Article
Return to the Q Tag Description

Differentiate Quotes with Styles

Mark said, Yeargh! It's Talk-Like-a-Pirate Day. Ahoy, Maytey!.

<p>Mark said, <q>Yeargh! It's <q>Talk-Like-a-Pirate Day.</q> Ahoy, Maytey!</q>.</p>

q { font-style: italic; }
p>q, p>q>q { font-style: normal; }

Return to the Q Tag Article
Return to the Q Tag Description

Getting Quotes on Both Browsers

Mark said, «Yeargh! It's ‹Talk-Like-a-Pirate Day.› Ahoy, Maytey!».

<p>Mark said, &laquo;<q>Yeargh! It's &lsaquo;<q>Talk-Like-a-Pirate Day.</q>&rsaquo; Ahoy, Maytey!</q>&raquo;.</p>

q:before, q:after { content: ""; }

Return to the Q Tag Article
Return to the Q Tag Description

Jennifer Kyrnin