HTML - <q> Tag

Quiz

Introduction to <q> Tag

The HTML <q> tag is used to define short quotations. It indicates that the enclosed text is short inline quotation, and browsers by default place quotation marks around these quotations. This tag is intended for short quotations that dont require a paragraph break.

For the long quotations use the <blockquote> tag.

Syntax

Following is the syntax of <q> tag −

<q>.....</q>

Attributes

The HTML <q> tag supports Global and Event attributes. Additionally, it has a specific attribute, which is listed bellow.

Attribute	Value	Description
cite	URL	Hold a URL that specifies the source of the quote.

Example: Creating a Short Quote

In the following example, we explore the usage of <q> tag in an HTML document. Running the code will display the text with quotations on the webpage.

<!DOCTYPE html>
<html>
<body>
   <p>
      When Dave asks HAL to open the pod bay door, 
      HAL answers: <q cite= "https://www.imdb.com/title/tt0062622/quotes/qt0396921">
      I'm sorry, Dave. 
      I'm afraid I can't do that. 
   </q>
   </p>
</body>
</html>

Example: Styling Short Quote

Consider the following example, where we are use the <q> tag and style its content using CSS properties. Running the code will display the text with quotations styled by CSS on the webpage.

<!DOCTYPE html>
<html>
<head>
   <style>
      q {
         color: green;
         font-style: italic;
      }

      p {
         color: green;
         font-size: 30px;
      }
   </style>
</head>
<body>
   <h1>HTML q Tag</h1>
   <p>
      tutorialspoint: <q>Easy to learn!
   </q>
   </p>
</body>
</html>

Example: Quoted Text

Here, we demonstrate the <q> tag with its attribute and use CSS properties to style Its content. Running the code will display the text with quotations styled by CSS on the web-page.

<!DOCTYPE html>
<html>
<head>
   <style>
      q {
         color: green;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>The q tag</h1>
   <p>
      <q cite="https://www.tutorialspoint.com">tutorialspoint: Easy to learn!</q>
      A EdTech organization which provides the 
      6000+ course and CSE tutorials and courses!
   </p>
</body>
</html>

Supported Browsers

Tag
q	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page