HTML Quotation

Table of Content


What are HTML Quotations?

HTML quotations are used to show that a piece of text is a direct quote from someone else. They are created using the <blockquote> tag. Anything inside the <blockquote> tag will be indented and displayed with a different style, such as italics or a different font.

Why Use Quotations?

Quotations are used for several reasons:

  • To show that a piece of text is a direct quote: This helps readers distinguish between the author's own words and the words of another person.
  • To emphasize important information: Quoting someone else can add weight to your argument or make a point stronger.
  • To add credibility to your writing: Using quotations from credible sources can support your arguments and show that you've done your research.


The following HTML code creates a blockquote:

<p>This is a direct quote from someone else.</p>

This will produce the following output:

This is a direct quote from someone else.

Types of Quotations

Quotation Marks (" ") vs. Blockquote (>)

Quotation Marks (")

  • Used to enclose direct quotes, the exact words spoken or written by someone.
  • Example: "The sky is blue," said the child.


  • Used to indicate a longer passage of text that is being quoted.
  • Begins with a greater-than sign (>) and ends with a new line.
  • Example:

	<p>This is a blockquoted passage. It shows a longer quote that is set apart from the rest of the text.> 


  • Length: Quotation marks enclose short, direct quotes, while blockquotes contain longer passages of quoted text.
  • Formatting: Quotation marks are placed around the quoted text, while blockquotes are indented and separated from the surrounding text.
  • Purpose: Both are used to indicate that the enclosed text is a quote from another source.

Quotation Tags

Usage and Syntax of Quoting Text

When you want to include someone else's words in your writing, you can quote them. A quotation is a section of text that is enclosed in quotation marks.


"Quoted text"

Effects on Quoted Text:

  • Indicates direct speech: Quoting someone's words shows that they are speaking directly.
  • Preserves original language: When you quote someone, you should use their exact words, including any grammatical errors or unique phrasing.
  • Provides evidence: Quoting someone's words can support your arguments or show different viewpoints.
  • Emphasizes important points: Quoting can help you draw attention to key ideas or phrases.


Original sentence: "The sky was blue and the birds were singing."

Quoted sentence: "The sky was 'blue' and the birds were 'singing'."

In this example, the quotation marks show that the words "blue" and "singing" are being quoted from someone else.

Best Practices for Using Quotations

Accurate Attribution

  • Always give credit when you use someone else's ideas or words.
  • Write the name of the author or source and where you found the information.
  • This shows that you respect the original work and avoid stealing credit.

Avoiding Plagiarism

  • Plagiarism means copying someone else's work and claiming it as your own.
  • Rephrase ideas in your own words.
  • Use quotes when you want to use the exact words of another person.
  • Remember, it's okay to use other people's ideas, but always give them credit!

Using Quotes Effectively

  • Use quotes only when you need to convey the exact words of another person.
  • Use quotation marks around the quote and include the author's name.
  • Make sure the quote fits into your sentence and supports your argument.


"The true measure of a man is not how he behaves in moments of comfort and convenience, but how he stands in times of adversity." - Martin Luther King Jr.

  • By using quotation marks and stating the author, you avoid plagiarism.
  • The quote supports the argument that a person's character is revealed during difficult times.

Common Mistakes to Avoid

Improper Nesting

Imagine you're building a house of blocks. You start with the foundation, then add walls, windows, and a roof. If you try to put the roof on before the walls, it won't fit properly. The same applies to coding: you need to follow the correct order, or things won't work.

Missing or Mismatched Closing Tags

Every opening tag in your code (like <p> for a paragraph) should have a closing tag (</p>). It's like a bracket: it starts and ends a section. If you forget a closing tag or use the wrong one, your code won't be able to understand where the section ends.

Styling Issues

Styling makes your code look pretty and organized. It's like painting and decorating a house. If your code is styled well, it's easier to read and understand. For example, you can use colors, fonts, and spacing to make it more appealing.

Advanced Quotation Techniques

Nesting Multiple Quotations

Imagine a conversation where you want to quote something someone said, but also include a quote within that quote. To do this, you can nest quotations:

  • "John said, 'Mary told me, 'The sky is blue.''"

In this example, the outer quotation marks indicate John's speech, while the inner quotation marks indicate Mary's speech.

Using CSS to Style Quotations

CSS (Cascading Style Sheets) allows you to control the appearance of your website, including quotations. Here's an example of CSS that styles quotations:

" {
font-family: Georgia;
font-size: 18px;
color: #000;

This code would make all quotations use the Georgia font, with a font size of 18 pixels and black color.

Quoting Code Effectively

When quoting code, it's important to use backticks (`) instead of quotation marks. This helps distinguish the code from the rest of the text:

  • console.log("Hello, world!");

By using backticks, you make it clear that you're quoting code, which can improve readability and prevent confusion.


Here's an example of how to nest quotations, use CSS to style them, and quote code effectively:


<p>John said, "Mary told me, 'The sky is blue.'"
<code id="code">console.log("Hello, world!");</code>


" {
font-family: Arial;
font-size: 14px;

#code {
background-color: #f0f0f0;
padding: 10px;

In this example, the outer quotation marks ("") are styled to use the Arial font and a font size of 14 pixels. The code is placed in a element and styled to have a light gray background and 10 pixels of padding.