How to add section that is quoted from another source using HTML?

HTML Web Development Front End Technology

A quote is a text element that is used to indicate a quotation or a passage of text that is being referenced or cited. There are two main ways to create a quote in HTML: the "blockquote" tag and the "q" tag.

Adding a section that is quoted from another source using HTML

To add a section that is quoted from another source in an HTML document, we use the <blockquote> tag. The <blockquote> tag is used to indicate that the enclosed text is a quote from another source.

To use the <blockquote> tag in your HTML document, simply surround the quoted text with the <blockquote> and </blockquote> tags.

For example −

<blockquote>
   Text Content
</blockquote>

You can also include the source of the quote by using the cite attribute. The cite attribute specifies the URL of the source from which the quote came.

For example −

<blockquote cite="https://www.tutorialspoint.com/articles/index.php">
      Text Content
</blockquote>

It is a good practice to include the author and title of the source within the quote, by using the <footer> tag and <cite> tag.

For example −

<blockquote cite="https://www.tutorialspoint.com/articles/index.php">
   Text Content
   <footer>Tutorials Point, <cite>India</cite></footer>
</blockquote>

By properly citing sources in your HTML document, you ensure that your readers can easily verify the accuracy of the information you've presented and give credit to the original authors of the content. Additionally, it also helps to avoid plagiarism, which is the unauthorized use of another person's work and ideas without giving credit.

Example

In the below example, we add a blockquote section. The section is defined without <cite> and <footer>.

<html>
<body>
   <h2>Welcome to TutorialsPoint</h2>
   <blockquote> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </blockquote>
</body>
</html>

Example

In the below example, we add a blockquote section. The section is defiend with <cite> and <footer>.

<html>
<body>
   <h2>Welcome to TutorialsPoint</h2>
   <blockquote cite="https://www.tutorialspoint.com/articles/index.php"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. <footer>Tutorials Point, <cite>India</cite></footer> </blockquote>
</body>
</html>

We can style the blockquote using CSS by targeting the blockquote element and applying the desired styling. For example, to change the text color to blue, we will add the following code to our CSS file −

blockquote {
   color: blue;
}

Example

<html>
<head>
   <style>
      blockquote {
         color: blue;
      }
   </style>
</head>
<body>
   <h2>Welcome to Tutorials Point</h2>
   <blockquote cite="https://www.tutorialspoint.com/articles/index.php"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. <footer>Tutorials Point, <cite>India</cite></footer></blockquote>
</body>
</html>

Conclusion

The <blockquote> tag is an important tool when it comes to citing sources in an HTML document. By using this tag, you can properly indicate which text is a quote, and provide your readers with the information they need to verify the accuracy of the information you have presented. By using the cite attribute, <footer> tag and <cite> tag, you can provide even more context and details about the source of the quote, making it easy for readers to find and access the original material.

Shabaz Alam

Updated on: 09-Mar-2023

117 Views

Kickstart Your Career

Get certified by completing the course

Get Started