Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add section that is quoted from another source using HTML?
A quote is a text element that is used to indicate a quotation or a passage of text that is being referenced or cited from another source. HTML provides two main elements for creating quotes: the <blockquote> tag for longer, block-level quotations and the <q> tag for shorter, inline quotations.
Syntax
Following is the syntax for the <blockquote> element
<blockquote cite="source-url"> Quoted text content <footer>Author, <cite>Source Title</cite></footer> </blockquote>
Following is the syntax for the <q> element
<q cite="source-url">Short quoted text</q>
Using the Blockquote Element
The <blockquote> element is used to indicate that the enclosed text is an extended quotation from another source. It is a block-level element that typically displays the quoted content with indentation and styling that visually distinguishes it from regular text.
The <blockquote> element supports the cite attribute, which specifies the URL of the source from which the quote came. While this attribute is not visually displayed by browsers, it provides valuable metadata for search engines and assistive technologies.
Example Basic Blockquote
Following example demonstrates a simple blockquote without citation details
<!DOCTYPE html>
<html>
<head>
<title>Basic Blockquote Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<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>
<p>This mission continues to drive our content creation today.</p>
</body>
</html>
The output shows the blockquote with default browser indentation
Welcome to TutorialsPoint
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.
This mission continues to drive our content creation today.
Example Blockquote with Citation
Following example shows a properly cited blockquote using the cite attribute, <footer>, and <cite> elements
<!DOCTYPE html>
<html>
<head>
<title>Blockquote with Citation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>About Our Mission</h2>
<blockquote cite="https://www.tutorialspoint.com/about/index.htm">
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> <cite>TutorialsPoint About Page</cite></footer>
</blockquote>
</body>
</html>
The output displays the quote with its source attribution
About Our Mission
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.
? TutorialsPoint About Page
Styling Blockquotes with CSS
Blockquotes can be styled using CSS to create visually appealing and distinctive quotations. Common styling approaches include changing colors, adding borders, adjusting margins, and modifying typography.
Example Styled Blockquote
Following example demonstrates custom CSS styling for blockquotes
<!DOCTYPE html>
<html>
<head>
<title>Styled Blockquote</title>
<style>
blockquote {
background-color: #f8f9fa;
border-left: 4px solid #007bff;
color: #495057;
font-style: italic;
margin: 20px 0;
padding: 15px 20px;
position: relative;
}
blockquote footer {
color: #6c757d;
font-size: 0.9em;
font-style: normal;
margin-top: 10px;
}
blockquote cite {
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Educational Philosophy</h2>
<blockquote cite="https://www.tutorialspoint.com/about/index.htm">
The best way to learn programming is through hands-on practice and real-world examples that students can immediately apply to their projects.
<footer> <cite>TutorialsPoint Teaching Methodology</cite></footer>
</blockquote>
<p>This approach has helped millions of learners worldwide.</p>
</body>
</html>
The styled blockquote appears with a blue left border, gray background, and italicized text
Educational Philosophy | The best way to learn programming is through hands-on practice and real-world | examples that students can immediately apply to their projects. | ? TutorialsPoint Teaching Methodology (styled with blue border, gray background, italic text) This approach has helped millions of learners worldwide.
Using the Q Element for Inline Quotes
The <q> element is used for shorter quotations that don't require paragraph breaks. Browsers typically render inline quotes with quotation marks automatically.
Example Inline Quotes
Following example demonstrates the use of inline quotes with the <q> element
<!DOCTYPE html> <html> <head> <title>Inline Quotes Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Famous Programming Quotes</h2> <p>As Albert Einstein once said, <q cite="https://example.com/einstein-quotes">Try not to become a person of success, but rather try to become a person of value.</q></p> <p>Steve Jobs emphasized that <q>Innovation distinguishes between a leader and a follower.</q></p> </body> </html>
The output shows inline quotes with automatic quotation marks
Famous Programming Quotes As Albert Einstein once said, "Try not to become a person of success, but rather try to become a person of value." Steve Jobs emphasized that "Innovation distinguishes between a leader and a follower."
Best Practices for HTML Quotes
When using HTML quote elements, follow these best practices
-
Always cite sources Use the
citeattribute to provide the URL of the original source whenever possible. -
Include attribution Use
<footer>and<cite>elements within blockquotes to provide proper attribution to authors and source materials. -
Choose the right element Use
<blockquote>for longer quotes that should be displayed as separate blocks, and<q>for shorter inline quotations. -
Avoid manual quotation marks Let the browser handle quotation marks automatically, especially for the
<q>element.
Example Complete Citation Example
Following example shows a comprehensive approach to citing sources with multiple quote types
<!DOCTYPE html>
<html>
<head>
<title>Complete Citation Example</title>
<style>
blockquote {
background: #f9f9f9;
border-left: 3px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
font-style: italic;
}
blockquote footer {
font-style: normal;
font-size: 0.9em;
color: #666;
margin-top: 0.5em;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Learning Philosophy</h2>
<p>Our approach is based on the principle that <q cite="https://example.com/education">learning by doing is more effective than passive reading</q>.</p>
<blockquote cite="https://www.tutorialspoint.com/about/index.htm">
We believe that quality education should be accessible to everyone, regardless of their geographical location or financial background. Technology has made it possible to democratize learning in ways never before imagined.
<footer> <cite>TutorialsPoint Mission Statement</cite></footer>
</blockquote>
<p>This philosophy guides our content creation and platform development.</p>
</body>
</html>
The example combines both inline quotes and block quotes with proper citations and styling.
Conclusion
The <blockquote> element is essential for properly citing longer quotations in HTML documents, while the <q> element handles shorter inline quotes. Using the cite attribute, <footer>, and <cite> elements together provides comprehensive source attribution, helping readers verify information and giving proper credit to original authors.
319 Views
