Home » Learn Code » HTML5 » What are HTML Quotations and HTML comments? Why and How to use them in HTML?

What are HTML Quotations and HTML comments? Why and How to use them in HTML?

quotations and comments in html

In this chapter, we’ll discuss HTML quotations. What are they and how to use them? Then, we will discuss HTML comments and how to use comments in HTML. The main purpose of the quotations is to represent the exact lines or language on the webpage that is come from another person. Like poet or writer etc.

The best example of quotations is when you take a passage of any book. Or you take a passage from a poetry book. And you want to write it on the web as it is.

Firstly, I am going to show you some quotation tags that we’ll discuss in detail. HTML has its own quotation tags which we can use to write quotes.

So let’s start:

<q> tag:

It is used to write short quotations in HTML. The text enclosed by <q> tags. So, this tag defines the short quotation around your text line. like this

HTML Code

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title> my webpage </title>
</head>
<body>
 
<p>
    <q> The purpose of our lives is to be happy. </q>
    --- Dalai Lama
</p>

</body>
</html>

Result in browser:

html quotations

<blockquote> tag:

It is used to write large quotations in HTML. This tag allows you to indent the text paragraph like in these images:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title> my webpage </title>
</head>
<body>
  
<p> this is the blockquote text paragraph below </p>
<blockquote>
   It is a long established fact that a reader will be
   distracted by the readable content of a page when 
   looking at its layout. The point of using lorem ipsum
   is that it has a more-or-less normal distribution of 
   letters, as opposed to using 'Content here, content
   here', making it look like readable English.
</blockquote>

</body>
</html>

Copy the code and paste it in your editor. Save and then see in browser.

You will see the blockquote paragraph is indent.

<bdo> tag:

Then, this tag will change the direction of your text. As you can see in these images below:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title> my webpage </title>
</head>
<body>
  
<p> this text is written from right to left </p>
<bdo dir="rtl">
   It is a long established fact that a reader
   wil be distracted.
</bdo>

</body>
</html>

Remember when you save your source file by pressing ctrl+s, then open your browser file and click refresh to see result.

bdo tag html quotations

<abbr> tag:

So, this tag defines acronyms in HTML, this tag very useful tag. When you mouse over the text this will show acronym of a text.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title> my webpage </title>
</head>
<body>
  
<p>
   when you mouseover on the text then it will
   show abbreviation
</p>
<abbr title="world health organization"> WHO </abbr>

</body>
</html>

<address> tag:

This tag defines the author or owner details of the website. You can add your complete address details in the address tags.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title> my webpage </title>
</head>
<body>
  
<p> this is the blockquote text paragraph below </p>
<address>
   Written by John <br>
   contact us at: [email protected] <br>
   street no. 2 d town etc.
</address>

</body>
</html>

this is result page:

So, now we’ll discuss comments. Why we use comments in HTML?

HTML Comments:

Comments make our code more readable, easily understandable and clear. We use comments in HTML to remember the tags in HTML because there is a lot of tags, classes, id and elements in HTML document. Then, how can we find that which tag performs which function or which tag is for a paragraph or which is for sidebar etc?

So, we use comments in the HTML source file to describe the purpose of the element or class. Now, let me show you the code so you understand that easily. The text inside <!– and –!> is comments. And, this will not visible to any browser mean frontend. This is only for web developers to make the code more readable and easy.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title> my webpage </title>
</head>
<body>

<!-- This is a Comment -->
<p> this is the blockquote text paragraph below </p>

<!-- This is address tag which describes 
the address details of the site admin -->
<address>
   Written by John <br>
   contact us at: [email protected] <br>
   street no. 2 d town etc.
</address>

</body>
</html>

Note: The comments does not shows in browser.

Above in the image, the green colour text is a comment. The syntax of comments is given above in the code. So, the important thing about comment is that they do not show in the browsers this is only for Html source file. You can also use both single or double comments in HTML. You can use as many comments as you want.

So, I hope you understood well HTML quotations and comments. Keep practice and search on google for more information. So meet in our next lesson.

Leave a Reply

Your email address will not be published. Required fields are marked *