Quotations in HTML

Quotations can enhance your HTML content by providing additional context or emphasizing key points. HTML offers two types of quotations: <q> for inline quotations and <blockquote> for longer, block-level quotations.

The HTML <q> Element

The <q> element is used for inline quotations within a paragraph or block of text. It indicates a short quotation and automatically adds quotation marks around the enclosed text.

"Inline quotations provide a concise way to incorporate short snippets of text directly within your content, maintaining readability and flow."

Best Practice: Use the <q> element for brief quotations that fit naturally within your content. It helps to emphasize the quoted text without interrupting the flow of your paragraph.

Example of <q> Element:

To include an inline quotation in your HTML:

<p>
  The author said
  <q>A journey of a thousand miles begins with a single step</q> 
  which is a famous proverb.
</p>
            

Output:

The author said A journey of a thousand miles begins with a single step which is a famous proverb.

The HTML <blockquote> Element

The <blockquote> element is used for longer, block-level quotations that span multiple lines. It visually sets the quoted text apart from the main content.

"Block quotations offer a distinct way to present longer passages of text, such as excerpts from literature, speeches, or articles."

Best Practice: Use the <blockquote> element for longer quotations that deserve special emphasis. It helps to create a visual break and highlight the quoted passage.

Example of <blockquote> Element:

To include a block-level quotation in your HTML:

          
<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
    dapibus nunc id metus pulvinar, vitae blandit dolor sagittis. In eget
    ligula nec mauris elementum volutpat. Proin at tortor purus.
  </p>
  <p>
    Nullam condimentum libero vel ligula semper tristique. Vivamus blandit
    tincidunt est, in vehicula purus varius at. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis
    egestas.
  </p>
</blockquote>
          

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nunc id metus pulvinar, vitae blandit dolor sagittis. In eget ligula nec mauris elementum volutpat. Proin at tortor purus.

Nullam condimentum libero vel ligula semper tristique. Vivamus blandit tincidunt est, in vehicula purus varius at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.