Learn The Blockquote And Quote Tag In Html

Sharing is healthy !!

Hey guys how are you doing!!! Today we learn the blockquote and quote tag in html.

Now i have a very simple html document,

<!DOCTYPE html>
<html>
<head>
<title>Learn The Blockquote Tag</title>
</head>
<body>
<p>Albert Einstein famous quote:
<p>The important thing is not to stop questioning.                          Curiosity has its own reason for existing.</p> </p>
</body>
</html>

In the body section i have got a couple of paragraphs. The first paragraph has a text “Albert Einstein famous quote:”.

Then i have an opening for another paragraph which is “The important thing is not to stop questioning. Curiosity has its own reason for existing.”

And then above paragraph is getting closed as you can see above. So it’s very simple document. Let me show you guys how this looks when i open it in a web browser,

Learn The Blockquote And Quote Tag In Html

This is how it looks and you have sentence number one on the first line and the next sentence you have an another paragraph.

Now since the second paragraph (as you can see above image) is a quotation and it’s one of my favorite quotes you know it would make sense if we would indented by a few characters and display it as indented text.

Also Read – Learn Center Tag And Non Breaking Space In Html

There are lot of ways in which we can achieve that. Firstly we can use the <pre> tag and we can have a few characters of space and you know obviously we will have to match the font and all so that it does not look weird.

Next the other option that we have is we can use the non-breaking space characters at the beginning of the paragraph so that we have the entire thing shifted.

The best and most convenient way of achieving quote effect is through the use of the blockquote tag.

What i am going to do is i am going to remove paragraph tag and type in blockquote like this,

<!DOCTYPE html>
<html>
<head>
<title>Learn The Blockquote Tag</title>
</head>
<body>
<p>Albert Einstein famous quote:
<blockquote>The important thing is not to stop questioning.                     Curiosity has its own reason for existing.</blockquote>
</p>
</body>
</html>

I will save above file and when i view it in my browser i see this,

Learn The Blockquote And Quote Tag In Html

As you can see above image we can see that the sentences shifted by a few characters of space.

So this is what the blockquote tag does and let’s say you don’t want the above block, that is, the text indented.

Instead you want quotation marks around the text. In that case the tag that you will have to use is known as the quote tag or the <q> tag.

And i will change the code in the text editor,

<!DOCTYPE html>
<html>
<head>
<title>Learn The Blockquote Tag</title>
</head>
<body>
<p>Albert Einstein famous quote:
<q>The important thing is not to stop questioning.                          Curiosity has its own reason for existing.</q> </p>
</body>
</html>

Next step is to save the above file and when i refresh it in my browser this is what it looks,

Learn The Blockquote And Quote Tag In Html

I see that i have quotation marks around the quote “The important thing is not to stop questioning. Curiosity has its own reason for existing.”

conclusion:

So that’s it for this post. I hope you guys have understood the blockquote and quote tag in html.

Sharing is healthy !!

Leave a Reply

Your email address will not be published.