HTML - <q> Tag

The HTML <q> tag stands for the quotation element; it indicates that the enclosed text is a short inline quotation. This tag is intended for short quotations that don’t require a paragraph break.

Most browsers implement this <q> tag by surrounding the text in quotation marks.This <q> tag takes one attribute, which is "cite", which specifies the source URL of the quotes.

For the long quotations use the <blockquote> tag.

Syntax

Following is the syntax of <q> tag −

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

Example

In the following example, let’s see the usage of <q> tag in the HTML document, as follows −

<!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>

When we run the above code, it will generate an output consisting of the text applied with quotations on the webpage.

Example

Considering the following example, we are using the <q> tag and also styling the content of the q tag using the CSS properties, as follows −

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

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

On running the above code, the output window will pop up displaying the text with a quotations applied with a CSS on the webpage.

Example

Let's look at the following example, where we are demonstrating the <q> tag with its attribute and also using the CSS properties to style the content of the <q> tag, as follows −

<!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>

When we run the above code, it will generate an output consisting of the text applied witha quotations on the webpage.

html_tags_reference.htm
Advertisements