Add Quotation Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the quotation tag in HTML.
What is Quotation Tag in HTML
The HTML quotation tag is used to indicate that a particular section of text is a quote. This tag is essential in web development, as it helps distinguish quoted text from regular text.
There are two types of quotation tags available in HTML and they are:
- Inline Quotation Tag
- Block Quotation Tag
Inline Quotation Tag
Inline quotations are short quotes that are included within the main text of a web page. To add an inline quote using the quotation tag, simply wrap the quote text in between <q> </q> tag, like this:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inline Quotation Tag Example</title>
</head>
<body>
<p>According to <q>Wikipedia</q>, HTML is the standard markup language for creating web pages.</p>
</body>
</html>Block Quotation Tag
Block quotations are longer quotes that are separated from the main text of a web page. To add a block quote using the quotation tag, simply wrap the quote text in between <blockquote> </blockquote> tag, like this:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Block Quotation Tag Example</title>
</head>
<body>
<blockquote>
<p>"The greatest glory in living lies not in never falling, but in rising every time we fall."</p>
<cite>Nelson Mandela</cite>
</blockquote>
</body>
</html>In the above example, the <cite> tag is used to indicate the source of the quote. This tag is often used in academic writing, where it is essential to cite sources accurately.
Attributes of Quotation Tag
Here are the attributes we can use with the quotation tag:
- id
- class
- style
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <q> or <blockquote> tag and use it to apply a specific style to that particular tag.
Example
<q id="quote">HTML stands for Hyper Text Markup Language</q>In the above example, we assign an id attribute to the inline quotation tag with a value quote. In CSS and JavaScript, we can use the name quote to access the specific q tag whose id value is set to the name quote.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the inline or block quotation tags and use it to apply a specific style to all the quotation tags that belong to a particular class.
Example
<q class="info">HTML stands for Hyper Text Markup Language</q>
<q class="info">A quick brown fox jump over the lazy doz</q>In the above example, both q tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both q tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the quotation tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<q style="color: red">HTML stands for Hyper Text Markup Language</q>The style="color: red" will change the font color of the quotation tag to red.
